1200字范文 > WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】

时间：2021-09-11 12:59:38

#兼容问题目录

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

17、IE6下同一层级的浮动元素会盖住绝对定位元素

18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

20、IE67下输入类型的表单控件，上下两边各有1px的间隙

21、IE8以及IE8之前不识别H5标签

22、IE6不支持png透明图片

后续兼容性问题处理链接地址

/baidu_37107022/article/details/71972223

/baidu_37107022/article/details/71973570

#16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法

给父级也加相对定位

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#box{width: 200px;height: 200px;border: 5px solid #f00;overflow: hidden;position: relative;}#box div{width: 300px;height: 300px;background: green;position: relative;}</style></head><body><div id="box"><div></div></div></body></html>

#17、IE6下同一层级的浮动元素会盖住绝对定位元素

解决办法

给定位元素外面嵌套一个层

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 5px solid #f00;position: relative;}.box div{width: 150px;height: 150px;background: green;float: left;display: inline;margin-left: 50px;}span{width: 100px;height: 100px;background: yellow;position: absolute;right: 0;top: 0;}</style></head><body><div class="box"><div></div><p><span>kaivon</span></p></div></body></html>

#18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

无法解决

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 10px solid #f00;position: relative;}.box div{width: 50px;height: 50px;background: green;position: absolute;right: -10px;bottom: -10px;/*left: -10px;top: -10px;*/}</style></head><body><div class="box"><div></div></div></body></html>

#19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

解决方法

给元素添加相对定位，或者给父级overflow:hidden;

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 1px solid #f00;}.box div{width: 100px;height: 100px;background: green;margin: -10px 0 0 -10px;}</style></head><body><div class="box"><div></div></div></body></html>

#20、IE67下输入类型的表单控件，上下两边各有1px的间隙

解决办法

给控件加浮动

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{border: 1px solid #f00;overflow: hidden;zoom: 1;}div input{float: left;}</style></head><body><div><input type="text" /></div></body></html>

#21、IE8以及IE8之前不识别H5标签

无法解决

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>document.createElement('header');document.createElement('nav');</script><script src="js/html5shiv.min.js"></script><style>header{width: 100px;height: 100px;background: red;/*display: block;*/}nav{width: 200px;height: 200px;background: green;}</style></head><body><header>头部</header><nav>导航</nav></body></html>

#22、IE6不支持png透明图片

使用插件

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('img,div');</script><style>body{background: #ccc;}div{width: 300px;height: 300px;background:url(img/1.png);}</style></head><body><img src="img/1.png"/><div></div></body></html>

导入插件处理

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('body');/** 这个插件不支持body的背景*/</script><style>/** 用滤镜的话就必需给body高度*/body{height: 500px;background: #ccc url(img/1.png) no-repeat;_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/1.png", sizingMethod="crop");}</style></head><body></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。