浏览器兼容性经典问题[整理篇]
不只做代码的搬运工：学习、研究、测试、总结、再收藏
（一） IE6 下双边距问题
问题描述：
一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。
代码如下：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是各浏览器的效果图（左侧为chrome 中间为firefox 右侧是IE6）：
从上面图中可以看到，最右侧的IE6的左边距是原本边距的2倍。
解决方法：
在2004年以前，IE6这个双边距问题一直没有得到一种很好的解决方法，普遍的做法是把边距设置为目标边距的1/2，以错对错的方法去实现。2004年之后，有一个工程师发现了一个简单的解决方法，到现在也是一直用这个方法来消除IE6双边距问题的。方法很简单：只需要给id为box的这个div加上一条简单的css代码就够了。
解决代码：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
_display:inline;
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是IE6的测试效果图：
添加 _display:inline; 之后
备注：
只需要加上" _display:inline; "就可以了。 因为在IE7以及IE7以上的IE版本中，这个双边距的bug已经修正，前缀符号"_"只有IE6能够识别，所以只需要让IE6去设置这个属性就足以。
（二） IE6 3像素bug问题
问题描述：
当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。
问题代码：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#left_box{
background:#1C86EE;
float:left;
height:100px;
width:100px;
}
#right_box{
background:#76EE00;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div id="left_box"></div>
<div id="right_box"></div>
</body>
</html>
各浏览器效果图：
各浏览器效果图
注释：
如上图（上中下分别是firefox chrome IE6）：
在firefox和chrome（包括IE8 IE9已测试）中，由于<div id="left_box">浮动了，所以脱离了文本流，导致了<div id="right_box">这个元素从头开始，所以蓝色覆盖在了绿色的上方。这是符合W3C标准的效果。
而在IE6则产生了著名的3像素bug，在相邻的像素中间产生了3个像素的空隙。
在IE7中（已测试），这个bug被修复了，消除了中间的3像素空隙。但是却不像firefox chrome那样符合W3C标准。
解决方法：
在各个浏览器下使得相邻的元素都是浮动的便可
代码如下：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#left_box{
background:#1C86EE;
float:left;
height:100px;
width:100px;
}
#right_box{
background:#76EE00;
height:100px;
width:200px;
float:left; /*加上浮动便可*/
}
</style>
</head>
<body>
<div id="left_box"></div>
<div id="right_box"></div>
</body>
</html>
各浏览器效果图：
各浏览器效果图
总结:
其实这个问题并不是特别的眼中以至于要用复杂的代码去解决它，只要你写出能符合W3C标准的效果代码变可以无形中解决这个问题。这里提出只是因为让大家更好的了解一下IE6下一些莫名其妙的事情罢了。
（三） IE6 不支持min-width属性
问题描述：
min-width的使用在流式布局（fluid layout）中是非常常见的，当用户在改变窗口大小的时候，网页内容会随之移动，直到窗口的大小确定位置。这个时候，min-属性变起作用了。可以通过限制min-属性，让页面产生滚动条，进而控制网页内容的位置。
但是非常遗憾的是，在IE6中，并不支持min-属性，需要通过一些特定的办法去解决这个问题。
在chrome firefox safari 和IE7+中，这个属性已经被支持了，可以直接使用。
问题代码：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
background:#ccc;
min-width:500px;
}
</style>
</head>
<body>
<div id="box">
---------内容--------
</div>
</body>
</html>
浏览器显示效果(左边chrome 中间firefox 右边IE6)：
从上面的浏览器效果图中可以看到，当窗口的宽度降到了500px以下，chrome和firefox浏览器下面产生了横向的滚动条，但是IE6却没有。下面我们就针对IE6来解决这个问题。
解决方法1：
使用IE（5-7）才支持的expression()表达式，可以很简单的解决这个问题，但是这种方法是不符合W3C标准的。
实现代码1：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
background:#ccc;
min-width:500px;
_width:expression(document.body.clientWidth<501 ? "500px" :"auto"); /*添加上这一句便可*/
}
</style>
</head>
<body>
<div id="box">
---------内容--------
</div>
</body>
</html>
代码解释：
只需要在指定的<div>中加上代码：_width:expression(width:expression(document.body.cilentWidth<501 ? "500px" :"auto");
由于只需要在IE6下进行一些改变，所以加上" _ "符号，当浏览器窗口宽度小于501px时，div宽度指定为500px，大于等于501px是，自动。
此处要注意的是：如果写document.body.clientWidth<500会导致IE6奔溃，（两处的大小相等会产生奔溃），所以此处用501或者502,；该<div id="box">不能指定margin或者padding，或者也会造成IE6奔溃。
解决方法2：
在<div id=box><div>中嵌套一个指定宽度的height：1px的<div>
实现代码2：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
background:#ccc;
min-width:500px;
}
.min-width-box{
width:500px;
font-size:0px; /*为空的div设置改css属性*/
}
</style>
</head>
<body>
<div id="box">
<div class="min-width-box"></div>
---------内容--------
</div>
</body>
</html>
代码解释：
在要指定min-width的div（box）中添加一个空的div（min-width-box）。对这个空的div进行css样式设置，宽度为需要设置的min-width；即width:500px;
由于在IE6下面,<div class="min-width-box"></div>是嵌套在<div id="box"></div>下面的，所以他的高度会和“------内容------”这个的字体大小有关，为了不设置高度，把他的font-size:0px 设置为0px即可。 有一些教程上用height:1px而没有使用font-size，经过验证，他的演示效果是会改变的。
浏览器的效果图：（左边chrome 中间firefox 右边IE6）
上面两种方法是实现的效果是一样的，自此便完成了这个问题的解决。
（四） 更好的清除浮动
问题描述：
在你使用css的过程中，多多少少会遇到清除浮动这个问题。
在一个div容器里面，容器中含有一个浮动的div，在浮动元素后面还有一些块元素。如果浮动的高度大于容器被非浮动元素撑开的高度，那么浮动元素就会超出容器。具体代码如下。
问题代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
padding:0px;
margin:0px;
}
#container{
font-size:20px;
background-color:#eee;
border:solid 3px #ddd;
}
#float_box{
background-color:#fff;
border:solid 3px #bbb;
width:80px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="float_box">floated element</div>
<h>the container</h>
</div>
</body>
</html>
各浏览器的效果图：（左为chrome 中间为firefox 右边为IE6）
注释：
在上面的的浏览器效果图中，能看到，float浮动元素并没有把父级元素contianer撑开，而是非浮动元素把父级元素container撑开，这是因为float元素并不属于文档流而造成的。所以导致了子元素的高度超过了父级元素。
我们其实可以通过人为地设置container的高度而是float元素乖乖得留在container元素中，但是这样设置就很死板，而且对流式布局等产生很多不方便的问题。
那么这时我们就需要清除浮动，让container在不设置高度的情况下自动撑开。
解决方法：
在IE8+以及主流的浏览器中，都支持:after这个伪类，我们可以通过在float浮动元素后面增加一些内容来撑开container，而在IE6 7中，我们则通过一些值的设置来触发IE特有的haslayout属性。
解决代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
padding:0px;
margin:0px;
}
.clearfix:after{
content:"";
height:0px;
visibility:hidden;
display:block;
clear:both;
}
* html .clearfix{
zoom:1;
}
#container{
font-size:20px;
background-color:#eee;
border:solid 3px #ddd;
}
#float_box{
background-color:#fff;
border:solid 3px #bbb;
width:80px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div id="float_box">floated element</div>
<h>the container</h>
</div>
</body>
</html>
注释：
给需要撑开的父级元素container添加上类class=clearfix，在css中添加以上新的css代码即可。
content:" ";height:0px;visibility:hidden;这三句为了在container后面的内容不可见，
display:block是用于替换掉默认的display:inline，因为clear属性不能用于行内元素，
clear：both是清除浮动
在IE6 7中，利用zoom:1触发haslayout属性即可。
各浏览器效果图：（左chrome 中间firefox 右边IE6）
可见，进行浮动清除后，父级元素container被撑开了，接下来你就可以安心的进行下面的布局了。
总结：
除了这种方法，网上还有很多其他的方法，其中一种比较简单的是：
在float元素后面添加一个<div id="clearbox"></div>的div，然后给这个div设置clear：both；
现在很多人在使用这种方法，但是这种方法我是不推荐的，首先因为这种做法会无端得给dom增加一个元素，其次这种方法也会引起其他一些不必要的问题，比如说IE6下著名的peekaboo捉迷藏问题。
还有一些人用overflow来进行清除，这些都是不推荐的。
（五） 元素背景色透明
（六） text-align的使用
问题描述
text-align可以使得 行内元素 在 块级元素 中居中
参照W3C标准的浏览器 块级元素 在 块级元素 中是无法居中的
问题代码
<div id="parent" style="text-align:center">
<div id="child"></div>
</div>
这段代码在主流标准浏览器中的效果如下：
但是在IE6 IE7 以及 IE8的混杂模式下面却居中了
所以为了兼容蛋痛的IE6 7和IE8的混杂模式我们可以用下面的代码实现 居中
<div id="parent" style="text-align:center">
<div id="child" style="width:50px;margin:0 auto"></div>
</div>
总结
我们可以使用margin-left：auto；margin-right：auto元素进行居中，（要设定width）
由于IE6 7 8的混杂模式不支持这种居中方式，所以在parent中设置上text-align：center便可
通过这种方式便可以实现水平居中 这里text-align：center的兼容性是大家需要注意的
来自博主 https://me.csdn.net/speed_feng
浏览器兼容性经典问题（一） IE6 下双边距问题
浏览器兼容性经典问题（二） IE6 3像素bug问题
浏览器兼容性经典问题（三） IE6 不支持min-width属性
浏览器兼容性经典问题（四） 更好的清除浮动
浏览器兼容性经典问题（五） 元素背景色透明
浏览器兼容性经典问题（六） text-align的使用
