兼容性：页面在不同的浏览器上可能显示不同；
1、在IE6下，子集的宽度会撑开父级设置好的宽度；
温馨提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同；
2、在IE6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以；
3、在IE6、7下，元素要通过浮动排在同一排，就需要给这行元素都加浮动；
4、注意标签的嵌套规则；
5、在IE6下，元素的高度如果小于19px，会被当成19px来处理；
解决方法：overflow:hidden;
6、在IE6下，不支持1px的dotted边框样式；
解决 方法：切背景平铺；
7、在IE下，大部分兼容性都是因为haslayout属性的触发问题，尽量触发haslayout属性，可以减少很多IE下的兼容问题；
在IE下，父级有边框的时候，子元素的margin会失效；
解决方法：触发父级的haslayout属性;
8、IE6下双边 距的bug；
在IE6下，块元素有浮动有横向的margin的值的时候，横向的margin的值会扩大两倍;
9、IE6下，margin-left 一行中左侧的第一个元素有双边距；margin-right 一行中右侧的第一个元素有双边距；
10、在IE6、7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙；
解决方法：1、给li加浮动；2、给li加vertical-align:top;
11、在IE6下，最小高度的bug和li的间隙问题共存的时候，给li加浮动，vertical-align:top不好使；
12、当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况时，最后一行的子级元素的margin-bottom会失效；（尽量避免）
13、在IE6下，文字溢出bug;
子元素的宽度和父级的宽度相差如果小于3px，两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多；
解决方法：用div把注释或者内联元素包起来；
14、在IE6下，当浮动元素和绝对定位是兄弟关系时，绝对定位会失效；
解决方法：不让浮动元素和绝对定位是兄弟关系，用div或者其他标签把元素包起来；
15、在IE6、7下，子级元素有相对定位，父级overflow包不住子级元素；
解决方法：给父级也加上相对定位；
16、在IE6下，如果绝对定位的父级的宽高是奇数的时候子级元素的right和bottom值会有1px的偏差；
17、在IE6下，固定定位fixed不好使；透明度opacity:值（0～1）不好使，用filter:alpha(opacity=50)设置；
18、在IE6、7下，输入型的表单标签上下会有1px的间隙；
解决方法：给input加浮动；
19、图片半透明（png 24），IE6不兼容；
解决方法：借助文件 DD_belatePNG_0.0.8a.js；
20、在IE下，条件注释语句可以显示
<!-- [if ie 6/7/8]>
我是IE6
<![endif]-->
21、css hack
background:red;
_background:yellow; // IE6及以下
+ background:yellow; // 或* IE7及以下
background:yellow\9; // IE9及以下
网友评论