浏览器兼容性问题以及解决方法2

时间:2022-08-26 15:33:14


1、IE6 双边距的问题

  这个的意思是,如果我将一个div使用float的情况下,不管是向左还是向右都会出现双倍的间距,我举一个最简单的例子说明一下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.box{
width: 200px;
height: 200px;
background-color: #ff89d9;
margin-left: 50px;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
  看到这个代码,可以很清楚的看到,这个效果应该是下面的:

浏览器兼容性问题以及解决方法2

但是在IE6的情况下,效果是这样的:

浏览器兼容性问题以及解决方法2

也就是在IE6中,左边的间距变成了100px,那要如何解决这个问题呢?给浮动元素加上display:inline。

修改的代码:

        .box{
width: 200px;
height: 200px;
background-color: #ff89d9;
margin-left: 50px;
float: left;
display: inline;
}
这样效果就达到了:

浏览器兼容性问题以及解决方法2
2、li里元素都浮动,li在IE6 7下方会产生4px间隙问题

     先举一个例子说明下这个问题:

html结构:

<ul class="list">
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
</ul>
css样式:

      .list{
margin:0;
padding:0;
list-style:none;
width:300px;
}
.list li{
height:30px;
border:1px solid red;
line-height:30px;
}
.list li a{
float: left;
}
.list li span{
float: right;
}
在Chrome下的显示效果是:

浏览器兼容性问题以及解决方法2

在IE6下的显示效果是:

浏览器兼容性问题以及解决方法2

      很明显的可以看到,li之间增加 vertical-align: top;了4px的间隙,要解决这个问题,可以采用 vertical-align: top;这个属性,因为只是针对IE6 7,所以可以写成 *vertical-align: top;。

3、浮动元素之间添加了注释,导致多复制了文字问题

     同样地,为了描述这个问题,我先抛砖引玉一下:

html结构如下:

<div class="wrap">
<div class="left"></div>
<span></span><!-- IE下文字溢出BUG -->
<div class="right">↓这是多出来的一只猪</div>
</div>
css样式如下:
        .wrap{
width: 400px;
}
.left{
float: left;
}
.right{
width: 400px;
float: right;
}
       从代码上看好像没什么问题,就是显示一句话,在普通的浏览器下显示确实没问题,但是呢,在IE6下惊人的结果如下:

浏览器兼容性问题以及解决方法2

      后面怎么多了几个文字!这个就是因为“两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px”导致这个问题的出现,解决方法如下:

 1) 两个浮动元素中间避免出现内联元素或者注释
 2)与父级宽度相差3px或以上

       现在我修改一下代码,将子元素的宽度改为相差3px的宽度,修改如下:

       .right{
width: 397px;
float: right;
}
      效果就是正常的了:

浏览器兼容性问题以及解决方法2
4、IE6 7父级元素的overflow:hidden;包不住子级的relative

      为了实现这个效果,我们首先需要创建一个含有父级和子级的结构:

<div class="box">
<div class="content"></div>
</div>
     然后呢,编写一些样式:

        .box{
width: 100px;
height: 100px;
border: 2px solid #ff89d9;
background-color: #000000;
overflow: hidden;
}
.content{
width:400px;
height: 400px;
background-color: #64b0ff;
position: relative;
}
      在Chrome下效果如下,没有问题:

浏览器兼容性问题以及解决方法2

       在IE6下的效果如下,父级没有包住子级:

浏览器兼容性问题以及解决方法2

       那如何解决这个问题呢?针对IE6 7给父级元素也添加相对定位,修改代码如下:

        .box{
width: 100px;
height: 100px;
border: 2px solid #ff89d9;
background-color: #000000;
overflow: hidden;
position: relative;
}
     这样就没问题了。

5、IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差

     为了实现这个效果,我们首先需要创建一个含有父级和子级的结构:

<div class="box">
<div class="content"></div>
</div>
     然后呢,编写一些样式,父级宽高是奇数:
.box{
width: 201px;
height: 201px;
background-color: #66d3ff;
position: absolute;
}
.content{
width: 100px;
height:100px;
background-color: #faa542;
position: absolute;
right: 0;
bottom:0;
}

      在Chrome下效果如下,没有问题:

浏览器兼容性问题以及解决方法2

       在IE6下的效果如下,right和bottom有1px的偏差:

浏览器兼容性问题以及解决方法2
      解决方法:避免父级宽高出现奇数。

6、IE6下绝对定位元素和浮动元素并列,绝对定位元素消失

     为了模仿这种效果,我写了如下的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #66d3ff;
border: 1px solid #000;
position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: #ff89d9;
float: left;
margin-left:50px;
*display: inline;
}
.box span{
width: 50px;
height: 50px;
background-color: #ffcb38;
position: absolute;
top:-10px;
right: -10px;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<span></span>
</div>
</body>
</html>
      div和span并列,而且div是浮动元素,span是绝对定位元素。

在Chrome下的效果是:

浏览器兼容性问题以及解决方法2

在IE6 下的效果是:

浏览器兼容性问题以及解决方法2

     在IE6 下绝对定位的元素span消失了,既然出现这个问题的原因是因为绝对定位元素和浮动元素并列,那么解决方法就是不要让这样的两个元素并列,处于同级关系就可以,修改代码如下:

<div class="box">
<div class="item"></div>
<p>
<span></span>
</p>
</div>
7、IE6 下input间隙问题

    既然是input出现间隙问题,那就直接写一个简单的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
background-color: #ff2834;
border: 1px solid #000000;
}
.box input{
width: 200px;
height: 30px;
border:0;
margin:0;
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<input type="text">
</div>
</body>
</html>

      在Chrome下的效果是:

浏览器兼容性问题以及解决方法2

      在IE6 下的效果是:

浏览器兼容性问题以及解决方法2
      从上面的效果图中可以很明显的看到,上下都多了一条间隙,而且是div的的背景颜色,那么要如何解决这个小bug呢?给input增加一个float:left;就可以。

8、IE6 下输入类型表单控件背景问题

     设计代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
height: 30px;
background: url(images/email.png) no-repeat;
}
</style>
</head>
<body>
<input type="text"/>
</body>
</html>

      在Chrome下的效果是:

       浏览器兼容性问题以及解决方法2

      在IE6 下的效果是:

      浏览器兼容性问题以及解决方法2

      在IE6下,当文字输入超出框的时候,背景图片会被移动,解决这个问题的方法:给背景架一个fixed属性,将背景固定就可以,修改代码如下:

input{
height: 30px;
text-indent: 30px;
background: url(images/email.png) no-repeat fixed;
}
修改完的效果:

浏览器兼容性问题以及解决方法2