IE CSS 常见错误

IE 6 在刚发布时实际上拥有任何浏览器中最好的 CSS 支持……七年前。其 CSS 支持中的小错误至今仍困扰着我们。我仍然收到一些人的评论，他们 完全拒绝任何 不在 IE 6 中起作用的技术。虽然我通常拒绝迎合 IE 6 的局限性，但我仍然认为在可能的情况下让内容在 IE 6 中看起来正确很重要。以下是一些 IE 中的常见错误，它们会让你时常遇到麻烦

盒模型

这可能是 IE 6 及以下版本中最常见和最令人沮丧的错误。假设你声明了一个这样的盒子

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

IE 6 将计算盒子的宽度为 100px。
现代浏览器将计算盒子的宽度为 124px。

这种差异会导致巨大的布局问题。我甚至认为 IE 版本在逻辑上更有意义，但这并非规范的编写方式。如果处于标准兼容模式，IE 6 实际上可以正确处理它，但在今天这很少见，因为仅仅使用 HTML 4.0 过渡性文档类型就会触发怪异模式和盒模型问题。

我通常通过不使用用于布局的盒子的填充来解决此问题。如果该盒子在 <p> 元素中包含一些文本，我将直接将所需的填充应用于该 p 元素。这只是规避了问题，但它有效。

 

双边距错误

使用我们上面提到的盒子示例，假设我们需要将其浮动到右侧

div#box {
   float: right;
   margin-right: 20px;
}

IE 6 将 将 20px 变成 40px。同样，这可能导致巨大的布局错误。对此的常用“修复”方法是向 div 添加“display: inline;”。我不确定这个“修复”方法是如何获得如此广泛的关注的，但它有点不切实际。我们不能对内联元素设置静态宽度，对吧？

我也喜欢在可能的情况下规避此错误。如果你真的需要将该盒子从其父元素的右侧推开，你可以通过向父元素添加填充来实现，这更有可能保持网格的一致性。此外，不要忘记填充。此错误不影响填充，因此你通常可以通过向所需一侧添加填充来获得相同的结果。

 

不支持最小宽度/最小高度

在元素上设置最小宽度和最小高度是一件如此自然和合乎逻辑的事情，以至于有时想到我不能依赖它们时，我会感到难过。IE 6 并非只是处理错误，而是完全忽略了它们。最小高度对于页脚等非常有用。假设你的页脚需要至少 100px 高，因为你在那里使用背景图片，但你不想设置静态高度，因为你希望它在文本大小显著增加时能够很好地增长。最小高度非常适合这种情况，但单独使用它将导致 IE 6 完全没有高度。令人惊讶的是，IE 6 将常规高度属性视为现代浏览器处理最小高度的方式，因此你可以使用“技巧”来修复它。我称之为“技巧”，因为我不认为它是一种技巧，因为它验证良好。

 

阶梯下降

通常，在浮动对象时，你可以依靠它们垂直对齐，直到它们断开。也就是说，如果你没有使用 IE 6，你可以这样做。IE 6 在每个浮动块元素后附加换行效果，这将导致“阶梯下降”。这里的解决方法是确保父元素中的行高设置为零 (0)，或者被浮动的元素是内联元素。更多关于 此处防止阶梯下降。

 

不支持悬停状态

大多数现代浏览器支持几乎所有元素的悬停状态，但 IE 6 除外。IE 6 仅支持锚 (<a>) 元素的悬停伪类，即使那样，如果你的锚没有 href 属性，你也不会获得它们。这里的解决方案是使用 专有修复，或者只是处理无法在所有你想要的地方拥有悬停状态。

 

不支持 Alpha 透明 PNG

有趣的是，微软自己开发了 PNG 格式，但他们自己的浏览器（直到 IE 7）并不原生支持它。我有一个关于 各种修复方法的总结。请记住，普通的非 Alpha 透明 PNG 文件在 IE 6 中无需任何修复即可正常工作，并且通常比它们的 GIF 姐妹更好。

*更新：我对微软的事情完全错了，不知道是怎么想到的。Tom Boutell 实际上开发了 PNG 格式。感谢大家！

 

所以……

所有这些错误都可以修复或规避，但如果你不进行测试，它们会让你遇到麻烦。我的总体理念是：使用尽可能现代的技术进行设计，然后确保它在旧版本中没有损坏。