IE6下常见兼容性问题
-
IE6下，块元素，同时有浮动和横向margin时，横向margin会变成两倍。
加设一个display:inline； -
IE6下li里的子元素如果都浮动，每个li之间会产生4px的缝隙。
加设一个vertical:top； -
IE6下量浮动元素间注释或存在内联元素时显示异常。
删除内联元素/注释，或者与父级元素宽度相差3px以上； -
IE6下父级元素的overflow:hidden包不住子级元素的relative。
给父级元素也增加一个relative。 -
IE6下绝对定位元素的父级元素宽高是奇数的，显示异常。
不要使用奇数。 -
IE6下浮动元素和绝对定位元素同级且并列时，绝对定位元素消失。
使两者不要同级存在。 -
IE6下input有间隙。
给input增加一个float -
IE6下输入类型表单控件背景图片，在输入框被写满时会把图片推走。
增加background:fixed -
<!DOCTYPE HTML>文档类型的声明。IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；
书写文档声明。 -
不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。
利用[CSS reset]进行样式的清除，然后再根据需要进行设置。 -
横向双倍外边距，在IE6中块元素浮动后，会出现[横向双倍margin]现象。
在float标签的样式控制中加入display：inline -
默认行高，IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
给超出高度的标签设置overflow：hidden；或者将文字的行高line-height设置为小于块的高度。 -
img标签有链接时外部的border
设置img边框border:0; -
图片默认有间距。img标签（每个img之后敲了回车）
为img设置float的浮动布局方式。 -
经典3像素bug。IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
设置非浮动元素浮动。 -
默认行高，清除浮动的时候，有些人会采取一种[清浮动的方法]。使用一个空的div，然后为这个div设置{clear：both}。在大部分浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。
设置其高度为0，并设置overflow:hidden。{height:0;overflow:hidden;clear:both;} -
a标签hover不适用于所有标签。IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果； -
IE6中table设置属性border-color无效；
运用CSS样式进行控制，而不是使用属性进行样式的处理。 -
IE6浏览器，不支持透明；
使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。 -
IE6不支持透明rgba与opacity此两种透明的设置方法；
使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。 -
子选择器在IE6中不能使用
采用其他选择器或者采用后代选择器进行控制，如：div
p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。 -
IE6浏览器，标签的最低高度/宽度设置（min/max-height）
为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最大高度和最大宽度，没有必要设置兼容，当前对于开发者来说，只需要保证IE6下正常显示即可，无需在它身上花费太多功夫。 -
纵向居中，IE6不支持display:table-cell。IE6浏览器，设置一个元素在另一个元素中垂直方向上居中对齐，不能够支持以单元格的方式来显示元素；
如果是单行文本，采用line-height和height的配合使得文本垂直居中，
如果中间是其他元素或者多行文本，采用其他方法进行居中处理，处理
方法有多种。 -
input 聚焦框颜色与样式不同
使用outline:none，清除默认样式之后再统一设置。 -
鼠标移上小手效果产生条件：IE6，
cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
cursor:pointer ; cursor:hand。 -
子标签无法撑开父标签的高度。产生条件：父标签内部含一个或多个子标签，父标签没有设置浮动，而子标签发生浮动；
方法1：在子标签最后添加清除浮动的设置<div
style='height:0;clear:both'></div>; 方法2：为父标签添加
{overflow:hidden;}的样式； 方法3：为父标签设置固定高度。 -
li的间距问题。IE6浏览器 li标签设置宽高，且li里面的元素发生了浮动；
方法1：li不设置宽高； 方法2：li内部的标签不进行浮动。 -
多个浮动元素中间夹杂HTML注释语句，浮动元素宽度设置为100%；则在下一行多显示一个上一行的最后一个字符；
果断删掉注释！ -
CSS优先级 ！important。IE6当中，在同一组CSS属性中，!important不起作用；
单独设置。
整理来源：
1、http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769
2、http://www.w3cfuns.com/blog-5479241-5410340.html
