内联CSS IE hack

Question

是否可以在使用内联CSS的同时创建盒模型hack？

例如：

<div id="blah" style="padding: 5px; margin: 5px; width: 30px; /*IE5-6等效代码*/">

谢谢！

- Daimonan

---

IE5的市场份额真的值得花费精力吗？我建议将IE5与Netscape 4放在同一个篮子里，并完全隐藏样式表。 - Kornel

Answer 1

你也可以在内联样式中使用“前缀”技巧：

<div style="*background:red"></div>

请确保将IE Hack放在style属性的末尾。但是，我赞同尽可能避免使用内联样式。条件注释和为Internet Explorer单独创建CSS文件似乎是处理此类问题的最佳方式。

- korchev

Answer 2

我会把它放到外面去 - 为那个元素添加一个class或使用你已经有的ID，并且在外部处理样式。

我也同意在我的答案之前提出条件注释的答案。

话虽如此: 作为一个绝对的最后手段，你可以使用以下样式hack来针对<= IE6，甚至IE7。问题在于，如果他们修复了IE8以打败你的hack，就会出现麻烦。

.foo {
padding: 5px;
^padding: 4px; /* this targets all IE, including 7. It must go first, or it overrides the following hack */
_padding: 3px; /* this targets >= IE6 */
width: 30px;
}

祝好运。

- John Dunagan

---

当然可以。实际上，任何字符除了下划线 _ 都可以用来破解 IE7。 - John Dunagan

Answer 3

没有争论CSS hack的利弊，个人认为如果我需要做这样的事情，我更愿意使用条件注释：

<!--[if lt IE 7]>
<style>
#blah {
padding: 5px;
margin: 5px;
width: 30px;
}
</style>
<![endif]-->

- alexp206

Answer 4

最好的解决方案是使用标准模式而不是怪异模式...那样可以立即消除大多数框模型的hack需求。

除此之外，有条件的注释可以使用IE特定的样式表，这种方法更加清晰和可维护。这种方法已经足够好用了，一直被顶尖设计师使用了几年...除非您的网站有特殊要求需要全部内联，否则建议您退一步，查看根本问题，而不是如何修补这些小症状。alt text http://sonicloft.net/im/52

- Gabriel Hurley

Answer 5

请记住，IE 6在怪异模式下需要盒模型hack，但在标准模式下不需要。IE 5和IE 5.5始终需要BMH。

因此，如果您处于标准模式，则需要使用类似{{link1：原始voice-family hack}}的东西（它针对IE 5.X而不是IE 6）。如果您处于怪异模式，则任何旧的IE <= 6 hack都可以。

（您的问题内容让我觉得您的页面以怪异模式呈现。）

- savetheclocktower

Answer 6

最合适的答案是不要。（编辑：明确一点，我的意思是不要在行内这样做，我不是说不要使用CSS hack。）

编辑：这是不起作用的，IE会忽略条件注释。我把答案放在这里以免造成困扰。

下一个最合适的答案是条件注释：

<div id="blah" style="padding: 5px; margin: 5px; width: 30px; <!--[if lte IE 6]> ... <![endif]-->">

- eyelidlessness

---

这不是有效的HTML。 - Konrad Rudolph

这样的条件注释可以写在标签内吗？ - Jeff Atwood

@Konrad: 为什么不行呢？这是一个有效的 HTML 注释。IE 可以解析它（这是不合法的），但它仍然是一个有效的注释。 - eyelidlessness

@Daimonan：它们可以写在任何可以写注释的地方。 - eyelidlessness

Answer 7

和其他人一样，如果你可以避免内联样式就尽量避免吧！但是如果你真的需要使用内联样式，那么解析器过滤器可能是你最好的选择，这些过滤器可以在属性中使用某些特定字符，例如ie6中的下划线hack。

print("code sample");

 style="position:relative;padding:5px; _position:absolute; _padding:10px;" 

IE6 仍然会获取下划线样式，其他浏览器将忽略它们！

还可以使用 !important 替代下划线。

尝试一下并看看会发生什么，但像上面所说，尽量避免使用。

- Paul M