background-size ie8不支持怎么解决

发布网友发布时间：2022-04-28 13:03

共2个回答

热心网友时间：2022-04-06 14:29

方法一：引用第三方js，一个叫respond.js的东西，github上可以搜到方法二：由于IE8不支持媒体查询，所以对应不同分辨率的样式失效了，所以解决方法也很简单，都用col-xs的列布局来实现就好了。

热心网友时间：2022-04-06 15:47

background-size 属性，这个属性主要用于调整背景图像大小，或者用像素，百分比进行显示。用像素表示的时候，会根据像素大小进行展示，如果设置为百分比的时候，那么会根据区域的宽度，高度进行动态设置。
background-size : contain | cover | 50px 50px | 100% 100%;
background-size的参数选择范围。其中50px 50px，将图片按照像素大小设置。100% 100%调整图片按照百分比显示
其中，contain; 在保持像素的长宽比例的同时，缩小图片来适应外围元素的大小。
conver：也是保持长宽比例，扩展图片填充完外围的元素区域。一个是填充，一个是缩小
这个background-size属性在，IE和遨游浏览器中并不支持，但是在火狐浏览器中通过添加私有的属性-moz-background-size从而获得支持，默认火狐浏览器并不设置，Safari 和 Chrome 也是一样的，需要添加私有属性 -webkit-background-size 来支持对该属性的支持，所以该属性的使用，较多适用于火狐浏览器，Safari 和 Chrome
在IE浏览器中，可以通过滤镜filter来实现。
background-image: url('test.jpg');
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale');
其中，图片的路径url和src必须一样，同时路径都必须是绝对路径，全路径，才可以，否则会出错
完整样例如下：
<style>
.pppp{
background-image: url('http://xxx.com/img/test.jpg');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://xxx.com/img/test.jpg',
sizingMethod='scale');
}
</style>
</head>
<body>

<div class="pppp" style="width:200px;height:100px;"></div>

</body>
</html>