本文汇总了IE6浏览器及各浏览器的常见兼容问题，包括文档类型声明、默认样式清除、横向双倍外边距等，并提供了详尽的解决方案。
IE6以及各个浏览器常见兼容问题 大汇总
综述：虽然说IE6在2014年4月将被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。
在此总结了常见的浏览器兼容问题，里面也有IE6的常见兼容问题，供大家分享。
1.<!DOCTYPE HTML>文档类型的声明。
产生条件：IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；
解决办法：书写文档声明。
2.不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。
产生条件：不同浏览器；
解决办法：利用CSS reset文件进行样式的清除，然后再根据需要进行设置。
html { font-family:"微软雅黑",Arial,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td { padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
table { border-collapse:collapse;border-spacing:0}
fieldset,img { border:0}
a { text-decoration:none;color:#000;outline:none}
li { list-style:none}
caption,th { text-align:left}
h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option { font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select { *font-size:100%}
a { -webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear}
为防止不同浏览器默认样式对于网页布局样式造成的影响，通常我们在HTML文件的头部引入上面这段重置代码，将一些浏览器所不同的样式以及部分标签的默认样式清除掉。
3.横向双倍外边距
产生条件：在IE6中块元素浮动后，会出现横向双倍margin现象。
解决办法： 在float标签的样式控制中加入display：inline
IE6存在不少的兼容问题，今天要说的是IE6 的 横向双倍外边距
横向双倍外边距的触发条件：
当浮动元素的浮动方向和浮动边界的方向一致。此时用IE6查看网页，就会发现，设置的横向的边距变成了双倍。
如：元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。
那么，如何修正这个IE6下的横向双倍外边距的Bug呢？
只需要给浮动元素加上display:inline;的CSS属性就可以了。
4.默认行高
产生条件：IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
解决办法：给超出高度的标签设置overflow：hidden；或者将文字的行高line-height设置为小于块的高度。
5.img外部的border
产生条件：img外部有a标签，即img标签有链接时
解决办法：设置img边框border:0;
6.图片默认有间距。
产生条件：img标签（每个img之后敲了回车）
解决办法：为img设置float的浮动布局方式。
7.经典3像素bug
产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
解决办法：设置非浮动元素浮动。
8.默认行高
产生条件：清除浮动的时候，有些人会采取一种清浮动的方法，使用一个空的div，然后为这个div设置{clear：both}。在大部分浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。
解决办法：设置其高度为0，并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}
选择清浮动位置时应注意以下：1、清浮动一定要在浮动标签完成浮动布局以后添加，否则会影响到浮动标签布局；2、清除浮动必须与前面的标签属于同级关系。
①clear属性定义了元素某个方向上不允许出现浮动元素：none（允许两边都可以有浮动对象）/left（…）/right（不允许右边有浮动对象）/both（不允许有浮动对象）;
②空标签清除浮动：在HTML页面中加入一个空标签用来清除浮动。
HTML：<div class="clear"> </div>
CSS:.clear{clear:both;hegiht:0;overflow:hidden;}
clear:both;是清除所有浮动；height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。
但是空标签清浮动会增加多余的代码。
③overflow：在需要清除浮动的腹肌标签中加入overflow即可，在IE6中不认识此属性则加入zoom：1；或者height：1%；css样式改为：.out{overflow:auto;zoom:1;}该属性对于父标签设置的高度小于子标签时，IE6/7、遨游则以下拉框形式出现，而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。
overflow:visible属性只能对IE6/7、遨游起作用，对火狐、谷歌、欧鹏、IE8无清浮作用。
overflow:visible(不剪切内容也不添加滚动条)/auto（是body对象和textarea的默认值，在需要时剪切内容并添加滚动条）/hidden（超出部分隐藏）/scroll（总是显示滚动条）;
④after清浮动：css样式为：
.out{zoom:1;}/*==for IE6/7 Maxthon2==*/
outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/
其中clear:both;只清除所有浮动；content:"";display:block;对于FF/chrome/opera/IE8不能缺少，content（）可以取空值。
⑤子标签浮动时，给父标签浮动
⑥下一标签直接清浮动：兄弟标签浮动时，下一标签直接写入清除clear：both；就可以。
⑦使用position：absolute；清除浮动。
9.a标签hover不适用于所有标签
产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
解决办法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；详情请查看日志：兼容IE6 a标签hover效果
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试1</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
margin: 20px auto;
width: 350px;
height: 270px;
background: #fcc;
}
h3{
display: inline;
}
a{
float: left;
width: 350px;
height: 35px;
margin-bottom: 5px;
background: red;
}
a:hover{
background: yellow;
zoom:1;
height:60px;
}
a:hover b,a:hover h3,a:hover span{
display: none;
}
</style>
</head>
<body>
<ul>
<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
</ul>
</body>
</html>
原效果
鼠标放上去的效果
a{float:left}将a标签转化成块元素，这样可以设置宽和高。
a:hover b{}当鼠标放在a标签上时，只是将a标签的b的内容隐藏掉，而不是将a隐藏掉。如果将a标签隐藏掉的，hover效果将消失，使display:none;失效。
10.table标签当中border-color属性设置无效
产生条件：IE6中table设置属性border-color无效；
解决办法：运用CSS样式进行控制，而不是使用属性进行样式的处理。
11.png格式图片
产生条件：IE6浏览器，不支持透明；
解决办法：使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。
12.透明rgba与opacity
产生条件：IE6不支持此两种透明的设置方法；
解决办法：使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
13.子选择器在IE6中不能使用
产生条件：IE6浏览器，使用E>F子选择器；
解决办法：采用其他选择器或者采用后代选择器进行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
14.不支持最大最小宽高
产生条件：IE6浏览器，标签的最低高度/宽度设置（min/max-height）
解 决办法：为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整 宽高）。对于最大高度和最大宽度，没有必要设置兼容，当前对于开发者来说，只需要保证IE6下正常显示即可，无需在它身上花费太多功夫。
15.纵向居中，IE6不支持display:table-cell
产生条件：IE6浏览器，设置一个元素在另一个元素中垂直方向上居中对齐，不能够支持以单元格的方式来显示元素；
解决办法：如果是单行文本，采用line-height和height的配合使得文本垂直居中，如果中间是其他元素或者多行文本，采用其他方法进行居中处理，处理方法有多种，详见日志：CSS元素水平垂直居中。
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style type="text/css">
.out{width:400px;height:300px;margin:20px auto;display:table-cell;text-align:center;vertical-align:middle;background:#ccc;}
.out img{width:100px;height:100px;background:#fcc;}
</style>
</head>
<body>
<div class='out'>
<img src="" alt="" />
</div>
</body>
</html>
其他的CSS实现垂直居中的方法
A 在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。
优点：适用于所有浏览器；没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现
缺点：唯一我能想到的就是需要额外的空元素了
#floater{float:left; height:50%; margin-bottom:-120px;}
#content{clear:both; height:240px; position:relative;}
<div id="floater"></div>