共计 1647 个字符，预计需要花费 5 分钟才能阅读完成。
第一种兼容
在设置宽度的时候，子级的宽度大于父级的宽度时。
规范浏览器下，子级的宽度不会撑开父级
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 能够用的款式
