九个常见的 IE Bugs

这篇东西算是对 IE Bugs 的总结和回顾；这些 bugs 大部分都存在于 IE6 当中。

1. 元素居中。这个 bugs 是最为著名的 bug 了，解决办法是，为元素所在的容器（父元素添上 text-align: center。
2. 阶梯式显示列表元素。用 Zen Coding 的语法写出现这个的 HTML 代码是：ul>li*n>a，n > 2。两个解决办法：将 li 设为浮动元素，后者改为 display: inline。
3. 浮动元素的双倍边距。增加 display: inline 即可解决。
4. 无法给元素设置数值较小的高度。原因或者是 IE 假定每个元素中都是有文字的，当然这是无责任的推测，推断自解决方案：一个是设定 font-size: 0，另一个是加上 overflow: hidden。
5. 可翻页容器中，以相对位置定位的子元素显示错位。继续以 Zen Coding 说明 HTML 的关系： div#element>div#anotherelement。#element 限定高度并设置 overflow 为 auto；#anotherelement 是相对定位，但高度值比其父元素 #element 要大。解决办法就是把父元素 #element 也设置为相对定位。
6. 固定定位元素的宽度问题。问题缘由于 padding 的设置；为固定定位元素设置 padding，其设定值也被计算到宽度中去，解决办法是 IE hacks。
7. 为元素设定最小高度和最小宽度。方案一，通过 !important 来达到目的：设定最小值，然后声明为 auto 并添上 !important 的标记，最后设置一个值：
    #element {
        min-height: 150px;
        height: auto !important;
        height: 150px;
    }
   方案二，利用选择符的实现程度做 IE hacks。
8. 固定宽度浮动元素的宽度异常。解决办法是设置 overflow: hidden。
9. 列表元素之间的空白。与上述第二条的 HTML 架构一模一样：ul>li*n>a，n > 2。方案一是为 a 元素设置一个固定宽度，方案二是设置 a 元素为浮动并添上 clear: left，方案三是设置 li 为 display: inline。

总结是，IE sucks。大部分问题都是盒子模型的理解问题，解决方案都是那几个突破口。不过，针对 IE 实现的 IE hacks 最好还是用<--[if lt IE 7]><[endif]--> 来插入额外的样式表，IE hacks 对其他浏览器来说也算是一个异数。