internet-explorer - IE8 背景大小解决方法

Question

我正在尝试解决涉及 IE8 及以下版本中的背景大小 CSS3 属性的显示问题。为了针对 Retina 显示器优化我的 Logo ，我实现了以下代码:

.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 正确调整 Logo 的大小(因为它不考虑背景大小)

/* 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 专用样式表的情况下执行此操作。

Answer 1

这是我的做法，在工作中我们不再支持低于 IE7 的版本。1)覆盖IE72) 覆盖 IE8 & IE93) 为 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 */