您的位置：首页 > 其它

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

2017-02-11 10:52 134 查看
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>
  看到这个代码，可以很清楚的看到，这个效果应该是下面的:



但是在IE6的情况下，效果是这样的：



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

修改的代码：

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



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下的显示效果是：



在IE6下的显示效果是：



      很明显的可以看到，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下惊人的结果如下：



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

 1） 两个浮动元素中间避免出现内联元素或者注释

 2）与父级宽度相差3px或以上

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

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



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下效果如下，没有问题：



       在IE6下的效果如下，父级没有包住子级：



       那如何解决这个问题呢？针对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下效果如下，没有问题：



       在IE6下的效果如下，right和bottom有1px的偏差：



      解决方法：避免父级宽高出现奇数。
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下的效果是：



在IE6 下的效果是：



     在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下的效果是：



      在IE6 下的效果是：



      从上面的效果图中可以很明显的看到，上下都多了一条间隙，而且是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下的效果是：
       


      在IE6 下的效果是：
     


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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航