0

我正在尝试修复涉及 IE8 及以下版本的 background-size CSS3 属性的显示问题。为了优化我的视网膜显示器徽标，我实现了以下代码：

.logo {
background: url('../img/logo_sm.png') no-repeat scroll transparent;
text-indent: -999em;
transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
margin: 0;
width: 141px;
height: 32px;
background-size: 141px 32px;
display: inline-block;

然后我添加了这些行以使 IE8 正确调整徽标的大小（因为它不尊重背景大小）

/* Make IE8 cooperate */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../img/logo_sm.png', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../img/logo_sm.png', sizingMethod='scale')";

问题现在在所有版本的 IE 中，原始背景图像显示在来自这些过滤器的新的、正确调整大小的图像后面。

我该如何设置，以便 IE8 及以下版本忽略原始背景属性并仅呈现一张图像？如果可能的话，我想这样做而不需要单独的 IE 样式表。

4

1 回答 1

1

这是我的做法，在工作中我们不再支持低于IE7。1) 覆盖 IE7 2) 覆盖 IE8 & IE9 3) 为 IE9 添加回来

*selector {background:none;} /* IE7 */
selector {background:none\9;} /* IE9, IE8 */
:root selector {background: url('../img/logo_sm.png') no-repeat scroll transparent\9;} /* IE9 */
于 2013-03-26T03:31:08.133 回答