IE 兼容性问题的处理

IE,特别是旧版本的 IE6 和 IE7,问题多如牛毛。为了减少问题,首先要做的就是选择一个标准的 doctype,比如 html5 的 doctype 如下:

<!DOCTYPE html>

这些标准的 doctype 将使得 IE 用(几乎)标准的模式来渲染页面,比如将使用 W3C 的盒模型而不是 IE 自己的盒模型,这样兼容性的问题就少很多了。

但是还没完,IE 还有其它的 Bugs。例如之前就遇到过 IE6 的 overflow bug。即,对于 position: relative 的子元素,父元素即使设置 overflow 为 auto 或者 hidden,子元素还是溢出了。代码如下:

<div style="overflow:hidden;160px;height:100px;border:1px black solid;">
<div style="position:relative">
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug 
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug  
</div>
</div>

这个问题的解决方法是对父元素也设置 position: relative。

以后还会遇到其它问题,先收集一些参考资料在这里,到时再更新。

参考资料:
[1] Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs翻译
[2] 打败 IE 的葵花宝典:CSS Bug Table :  幸福收藏夹
[3] IE CSS Bugs That’ll Get You Every Time | CSS-Tricks
[4] IE兼容性bug汇总 - 江柳清happy - 博客园
[5] Internet Explorer CSS Bugs - hasLayout.net
[6] The IE 'non-disappearing content' bug
[7] Quirks Mode and Standards Mode - MDN
[8] Activating Browser Modes with Doctype
[9] IE盒模型缺陷 - 维基百科,自由的百科全书
[A] Quirks mode - Wikipedia, the free encyclopedia
[B] CSS - Quirks mode and strict mode
[C] CSS2 - Box model tweaking
[D] CSS Basic User Interface Module Level 3 (CSS3 UI) #box-sizing
[E] box-sizing - CSS | MDN
[F] Box Sizing | CSS-Tricks

原文地址:https://www.cnblogs.com/zoho/p/2870058.html