CSS HTML如何忽略非ie7或ie8的一些css答案

【问题标题】：CSS HTML how to ignore some css for non ie7 or ie8CSS HTML如何忽略非ie7或ie8的一些css
【发布时间】：2012-05-06 08:27:08
【问题描述】：

所以我有以下 CSS 用于将背景图像的大小设置为我的 div 的 100%。

#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;  
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
behavior: url(/scripts/PIE.htc);
padding: 10px;
color: #FFF;
cursor: pointer;

}

这似乎现在在所有浏览器中都有效，但唯一的问题是在 IE7 和 IE8 中，当图像被拉伸以适应 div 时，我可以看到背景的轮廓：url(/images/leadGen_bg2.png)。而且我已经测试过，如果我在上面取出 background:url(/images/leadGen_bg2.png) ，它在 IE7 和 IE8 中仍然可以正常工作，但在 Firefox 中无法再看到它。

我怎样才能解决这个问题？

【问题讨论】：

标签： html css

【解决方案1】：

使用条件注释来加载专门用于 IE8 及以下版本的样式表，并使用它来加载所有的 hax。

<!--[if lte IE 8]><link rel="stylesheet" href="ie-hax.css" /><![endif]-->

【讨论】：

啊，是的，这看起来应该做什么我只是无法控制实现哪些样式表。无论如何，CSS 文件中是否有实现浏览器应该做什么...在 IE7 中的 IE 我可以做 * IE8 有类似的东西吗？

【解决方案2】：

扩展 Kolink 的答案：

<!--[if lte IE 8]>
#solutionsNav div.leadgen { background: none; }
<![endif]-->

确保此规则位于您在答案中定义的规则之后，以便优先。为您的 IE hack 使用单独的样式表是个好主意。

【讨论】：

【解决方案3】：

我使用conditional classes 来解决这个问题。例如，如果您将开头的 <body> 标记替换为：

<!--[if lt IE 7 ]><body class="oldie ie6"><![endif]-->
<!--[if IE 7 ]><body class="oldie ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->

...您将获得一系列专门针对 Internet Explorer 的类。您可以在 CSS 中专门针对 IE，如下所示：

/* Good browsers */
#solutionsNav div.leadgen {
    background:url(/images/leadGen_bg2.png) no-repeat;
    background-size: 100% 100%;  
    padding: 10px;
    color: #FFF;
    cursor: pointer;
}
/* IE-specific code */
.oldie #solutionsNav div.leadgen,
.ie8 #solutionsNav div.leadgen {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
    behavior: url(/scripts/PIE.htc);
}

【讨论】：