0

因此，我有以下 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 中无法再看到它。

我怎么能解决这个问题？

4

3 回答 3

3

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

<!--[if lte IE 8]><link rel="stylesheet" href="ie-hax.css" /><![endif]-->
于 2012-04-25T15:59:32.557 回答
0

要扩展 Kolink 的答案：

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

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

于 2012-04-25T16:01:27.400 回答
0

我使用条件类来解决这个问题。例如，如果您将开始<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);
}
于 2012-04-25T16:05:33.787 回答