寻找一种干净的方法来处理多个内联块元素的IE7兼容性

Question

我在网页中出现了几次内联块元素。我厌倦了应用

*display: inline;
zoom: 1;

破解使用这些块的所有css选择器。是否有方便的方法来修复页面上的所有事件？

Answer 1

可悲的是，我对你的问题的回答是“不，没有更好的解决方案。”如果您需要支持IE7，那么您必须做出妥协。

可能有一些方法可以重构样式表以使其不那么明显 - 将其隐藏在单独的文件中，或者将它们放在自己的类中或类似的东西中 - 但可能性最终会让你做出妥协它;它可能会使事情看起来更整洁，但它可能会增加维护工作量而不是简化事情。

您真正要摆脱必须拥有源代码的唯一方法是在发布文件时使用某种预处理器将它们添加到样式表中。如果你需要支持IE7，你无法摆脱它的需要。但实际上并没有摆脱它，它为您的部署过程增加了一个额外的步骤，因此它并不是非常理想。

我猜另一个选择是做其他人做过的事情并放弃对IE7的支持。这可能是最明智的选择。我已经好几年没有支持IE7了，我也不认识其他人。像这样的东西就是这个原因。哦，事实上没有人真正使用IE7了。

Answer 2

你可以有一个大的选择器同时适用于所有这些选择器，例如

/* Inline-block fix for older versions of IE */
.foo,
.bar,
.baz,
.gallery > li {
    *display: inline;
    zoom:1;
} 

Answer 3

您可以尝试使用条件样式黑客。

创建一个单独的css文件，其中包含带有!important的IE6 / 7黑客攻击。然后在链接常规css后将此文件包含在您的页面中。

<!-- IE7-specific fixes -->
<!--[if lte IE 8]>
<style type="text/css"> @import url("./IE7Fix.css"); </style>
<![endif]-->

这样您就不必触摸主css，只需根据id-selector或class-selector指定样式一次。一旦您确定不再需要支持IE7，就可以删除此内容。