Question

我正在尝试修复涉及IE8及更低版本中背景大小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样式表。

Answer 1

这是我的方法，在工作中我们不再支持IE7。 1）覆盖IE7 2）覆盖IE8＆amp; 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 */

IE8背景大小的解决方法

1 个答案: