我在网页中多次出现 inline-block 元素。我厌倦了应用
*display: inline;
zoom: 1;
破解所有使用这些块的 css 选择器。有没有一种方便的方法来修复页面上所有出现的问题?
我在网页中多次出现 inline-block 元素。我厌倦了应用
*display: inline;
zoom: 1;
破解所有使用这些块的 css 选择器。有没有一种方便的方法来修复页面上所有出现的问题?
可悲的是,我对您的问题的回答是“不,没有更好的解决方案。” 如果您需要支持 IE7,这些是您必须做出的妥协。
可能有一些方法可以重构样式表以使其不那么明显——将其隐藏在单独的文件中,或者将它们放在自己的类中或类似的东西中——但你最终可能会在它上面做出妥协;它可能会使事情看起来更整洁,但它可能会增加维护工作而不是使事情变得更容易。
您真正摆脱必须拥有该源代码的唯一方法是在发布文件时使用某种预处理器将它们添加到您的样式表中。如果您需要支持 IE7,就离不开它。但这并没有真正摆脱它,而且它为您的部署过程增加了一个额外的步骤,所以它并不是很理想。
我想另一种选择是做其他人都做过的事情并放弃对 IE7 的支持。这可能是最明智的选择。我已经好几年不支持 IE7 了,我不知道还有谁支持过。像这样的东西就是原因。哦,事实上已经没有人真正使用 IE7 了。
你可以有一个同时适用于所有这些的大选择器,例如
/* Inline-block fix for older versions of IE */
.foo,
.bar,
.baz,
.gallery > li {
*display: inline;
zoom:1;
}
您可以尝试使用条件样式 hack。
创建一个单独的 css 文件,其中包含您的 IE6/7 hack,带有!important
. 然后在链接您的常规 css 后将此文件包含在您的页面中。
<!-- IE7-specific fixes -->
<!--[if lte IE 8]>
<style type="text/css"> @import url("./IE7Fix.css"); </style>
<![endif]-->
这样你就不必接触你的主 css 并且你只根据 id-selector 或 class-selector 指定一次样式。一旦您确定不再需要支持 IE7,您可以删除此包含。