第一种兼容

在设置宽度的时候,子级的宽度大于父级的宽度时。

规范浏览器下,子级的宽度不会撑开父级

IE浏览器下会撑开对应的宽度

第二种兼容

IE6中不能用margin的办法让元素显示在一行,

必须应用float的办法,让内容显示在一行。

第三种兼容

嵌套问题:P标签不能包div

就是说P标签不能蕴含块标签

第四种兼容

元素的最小高度

IE6中会主动给高度增加为19。因为IE6认为最小高度为19px,如果有余,主动补全

如果想要设置高度小于19px的,做到浏览器兼容,

必须增加overflow:hidden;

第五种兼容

边框:不反对1px的边框,两厘米以上就反对了

规范浏览器中双边距:里 中 外三个别离是n px;

IE浏览器中反对3px以上,并且平分n px。

第六种兼容

margin:如果想让margin在IE中失常显示,须要调用haslayout,在父级用zoom=1;

调用

.box{ background: #f00; / 规范浏览器下失常显示 / / border: 1px solid #f00; / overflow: hidden; /ie触发 须要应用zoom:1; 触发haslayout / zoom:1; } .div{ width: 200px; height: 200px; background: #00f; margin: 100px; }

第七种兼容

IE的双边距

失常在IE中设置margin不会呈现双边距的问题

如果div设置了float,就会呈现双边距

如果解决双边距问题,增加:display:inline;

(双边距的意思是margin:100px;的时候显示200px)

.box{ width: 200px; height: 200px; background: red; float: left; margin: 100px; display: inline; }

第八种兼容

IE中li会呈现缝隙

当应用li标签时,没用让所用的li浮动时,在IE6中就会呈现缝隙;

解决办法:float

或者是vertical-align:top;

第九种兼容

IE中li会呈现缝隙

最小高度和缝隙同时呈现的时候,必须用float解决。

第十种兼容

ie最恐怖的兼容问题之一

如果父级元素的宽度超过子级总宽度的3px,会呈现下边距隐没的状况

如果子级不满行的状况下,最初一行会呈现下边距隐没的状况

解决:给最初一个元素加visibility:hidden;元素隐没,然而不让出原来的空间

第十一种兼容

如果子元素的宽度比父级的宽度大,或者等于父级的宽度,

这时,如果子元素的兄弟是正文或者行级元素,文字就会溢出;行级元素越多,溢出的越多

解决:创立一个div,将所有的行级元素包起来,变成块级,就好了。

第十二中兼容

浮动 和 定位 的兼容问题

IE中当浮动元素和定位元素是兄弟关系时,决定定位会生效

解决:让浮动元素和定位元素不是兄弟关系

用div或者块其余标签把a标签包起来。

十三种兼容

定位 兼容问题

如果想要呈现文字滚动的成果,IE6,7,8间接应用绝对定位,在父级中overflow是包不住子元素

解决:给父元素也增加一个绝对定位 position:relative;

十四种兼容

定位时 边框的奇偶数

在IE6里如果定位的父级宽度为奇数的时候子元素的right和bottom会有1px的偏差

解决:没方法解决,穿件页面的时候,尽量应用偶数值,包含字体大小

十五种兼容

IE6中不反对position:fixed;

能够用JS的滚动和赋值来解决

opacity在IE6外面不兼容

能够应用

filter:alpha; (opacity=50)进行兼容

十六种兼容

input 表单的兼容

IE中会呈现1px的缝隙

解决:让input框浮动

十七种兼容

图片兼容问题

不辨认png图片,不反对通明

用js来解决这个问题

<script> DD_belatedPNG.fix('.box'); </script>

十八种兼容

[if IE]> 我是 ie <![endif]

十九种兼容

css 的hack

+ ie7 以下,包含ie7能够用的款式-ie6以下,包含ie6能够用的款式\ ie7以下,蕴含ien能够用的款式