IE6兼容常见汇总

虽然IE6到IE8的时代到现在已经过去了，以前总结的东西估计也用不上了。但也不能把好好的笔记都浪费不是。以下献上IE6兼容汇总。致怀念以前万恶的IE6啊~

 

 

首先是 CSS2 里的兼容性

１．IE6下内容会撑开设置好的宽高 （所以请精准精算）包括行高高于设置好的高度也会撑开高度
■撑开高度■

２．在IE6，7下 元素浮动之后，如果宽度需要内容撑开的话，就给元素里边的块元素都加浮动，否则，就给元素设置宽度
■浮动内容不一■

３．在同一行里，任何一边浮动后，在同一行的元素都要浮动，否则有间隙
■同行浮动间隙■

４．P标签下不可以再包块标签，注意嵌套规范。不然就会被当做写了两个P标签
■嵌套规范■

５．在IE6下不支持一个像素的点线，会被当成虚线，所以用背景的重复来代替吧
■虚线不支持■

６．IE6下高度小于19PX都会被当成19PX来处理，很多时候我们用 overflow:hidden
■最小高度■

７．IE6下，父级如有有边框的话，子元素的 margin 就会不起作用， 这个时候就要触发父级的 haslayout 来解决
■子边距失效■

８．a 标签包图片在IE6下有边框　所以在img样式里 加个边框为 none 也就解决了
■IMG边框■

９．在IE6下，块元素有浮动和横向的margin，横向X轴的margin值会被放大成两倍，用 display:inline 解决
■双边距BUG■

１０．在IE6，7下，li本身没浮动，但是内容有浮动，li下边就会多出来几像素的间隙,这个时候要么让li也浮动要么加垂直对齐方式
■未浮动的Li■

１１．在IE6下，在两个浮动元素之间有注释或者内嵌元素 “或者” 父级的宽度和子元素的宽度相差小于3px 元素最后几个文字会被复制
解决办法： 用div把注释或者内嵌元素包起来
■文字溢出BUG■

１２．在IE6下.当一行子元素占有的宽度之和，和父级的宽度相差超过3PX，或者或者有不满行状态的时候,最后一行元素的下 margin 失效了，暂无解决办法
■首尾子边距失效■

１３．浮动元素和绝对定位元素是并列关系的话，绝对定位在IE6下会消失掉 然后用DIV把绝对定位的那个元素包起来就可以了
■并列的浮动定位会不见■

１４．在IE6下，绝对定位元素父级的宽(高)度是奇数的话，right(bottom)值会有1px的偏差;
■奇数偏差■

１５．在IE6，7下子元素有相对定位的话，父级的overflow对它不起作用了。 所以在父级上也给它加个定位就可以了
■溢出隐藏失效■

１６．在IE6下，使用margin负值，使元素移除父级的范围，超出部分会被父级隐藏掉，解决办法的话加加定位　relative
■超范围隐藏■

１７．在IE6，7下输入类型的表单控件 input 上下会有1px的间隙，而且还会撑开设置好的高度 解决办法就是让这个 input 浮动
■表单上下间隙■

１８．在IE6，7下输入类型的表单控件，border:none 无效　解决办法: 重置背景
■表单边框不可除去■

１９．在IE6，7下输入类型的表单控件，输入文字的时候，背景跟着文字一块移动　，如果可以的话把背景加给父级就解决了
■移动的表单背景■

２０．非正常的浏览器下，只支持绝对与相对于默认，也就是不支持固定 解决办法：JS做兼容
■固定定位的支持■

２１．IE6下表格,tbody或者thead身上有背景，然后<tr>或<td>也有背景，那么加在tbody或thead身上的背景无效 无解决办法
■表格背景失效■

２２．在正常浏览器下 !important 加在某一条样式里，这个样式的级别都是最高的,在IE6下，加了这个样式后，后面还有样式或者行间还有样式，那就跟默认样式走。所以这个一般加在CSS最后面里
■!important的级别不最高■

 

２３.　　在IE6，7下，text-indent居然可以控制input等元素的位置
■首行缩进可控制元素■

 

２4.　　在IE6，7下，text-indent居然可以控制input等元素的位置
■滚动条占位■