css3的background-size兼容IE低版本

众所周知。IE浏览器是个特么头疼的家伙,是不是看到它就想当面强奸它的感觉大笑

我也是刚初来咋到,今天写页面的时候用到的css3的background-size属性,其经常出现的值有cover或者用100% 100%

但到了IE6,7, 8它不兼容。。。所以今天用到filter过滤器来解决找个问题

css代码如下:

在background-size的容器内添加这句代码即可解决IE6,7,8 的兼容问题

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='背景图片路径',sizingMethod='scale');

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一段兼容IE8的简单轮播图代码: HTML代码: ```html <div id="slider"> <ul> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li> <li><img src="image3.jpg" alt="Image 3"></li> </ul> <a href="#" id="prev">Prev</a> <a href="#" id="next">Next</a> </div> ``` CSS样式: ```css #slider { position: relative; width: 600px; height: 400px; overflow: hidden; } #slider ul { position: absolute; list-style: none; margin: 0; padding: 0; width: 1800px; /* 3 images * 600px */ left: 0; } #slider li { float: left; width: 600px; height: 400px; } #slider img { width: 100%; height: 100%; } #slider a { display: block; position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #333; color: #fff; text-decoration: none; font-size: 20px; z-index: 2; } #slider #prev { left: 20px; } #slider #next { right: 20px; } ``` JavaScript代码: ```javascript var slider = document.getElementById('slider'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var ul = slider.getElementsByTagName('ul')[0]; var liArr = slider.getElementsByTagName('li'); var imgWidth = liArr[0].offsetWidth; var index = 0; prev.onclick = function() { index--; if (index < 0) { index = liArr.length - 1; } ul.style.left = -index * imgWidth + 'px'; }; next.onclick = function() { index++; if (index >= liArr.length) { index = 0; } ul.style.left = -index * imgWidth + 'px'; }; ``` 以上代码实现了一个简单的图片轮播图,点击“Prev”和“Next”按钮可以切换图片。在IE8中测试通过。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值