CSS 'background-size'属性 - 跨浏览器解决方案？

Question

我有一个元素使用这个css：

.my-box {
padding-left:50px;
background-image:url('images/img01.png');
background-size:20px;
height:20px;
}

我的问题是：在像Internet Explorer这样的浏览器中，"背景大小"属性不起作用。有没有一种解决方案可以通过JavaScript、jQuery或CSS来实现这一点，而不必放入物理<img>标记中的标记？

Answer 1

背景将填充选择器而不缩放

.background-size-cover {
  background: url('+$image_path+') no-repeat center top; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+$image_path+", sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+$image_path+", sizingMethod='scale')";
}

背景的大小（缩放）将达到选择器的全部高度

.background-size-full-height {
  background: url('+$image_path+') no-repeat center top;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}

Answer 2

您可以使用这个polyfill。也许可以解决你的问题。添加对背景大小的支持的IE行为：封面；和背景大小：包含；至IE8。

如何使用它

无论你在哪里使用背景尺寸：封面；或背景大小：包含；在CSS中，添加对此文件的引用。backgroundsize.min.htc

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

请参阅此处：背景大小polyfill-github repo和更多信息