WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】
#兼容問題目錄
16、IE67下子級有相對定位，并且比父級要大。那父級overflow:hidden;后是包不住它的
17、IE6下同一層級的浮動(dòng)元素會(huì)蓋住絕對定位元素
18、IE6下定位父級的寬高是奇數(shù)的話，元素的right值或者bottom值會(huì)有1px的偏差
19、IE6下通過margin負(fù)值，使元素移出父級的位置，那出去的部分會(huì)被截掉
20、IE67下輸入類型的表單控件，上下兩邊各有1px的間隙
21、IE8以及IE8之前不識別H5標(biāo)簽
22、IE6不支持png透明圖片
后續(xù)兼容性問題處理鏈接地址
http://blog.csdn.net/baidu_37107022/article/details/71972223
http://blog.csdn.net/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><!--IE67下子級有相對定位，并且比父級要大。那父級overflow:hidden;后是包不住它的解決辦法給父級也加相對定位--><div id="box"><div></div></div></body> </html>#17、IE6下同一層級的浮動(dòng)元素會(huì)蓋住絕對定位元素
解決辦法
給定位元素外面嵌套一個(gè)層
代碼演示
<!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><!--IE6下同一層級的浮動(dòng)元素會(huì)蓋住絕對定位元素解決辦法給定位元素外面嵌套一個(gè)層--><div class="box"><div></div><!--<span>kaivon</span>--><p><span>kaivon</span></p></div></body> </html>#18、IE6下定位父級的寬高是奇數(shù)的話，元素的right值或者bottom值會(huì)有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><!--在IE6下，定位父級的寬高是奇數(shù)的話，元素的right值或者bottom值會(huì)有1px的偏差--><div class="box"><div></div></div></body> </html>#19、IE6下通過margin負(fù)值，使元素移出父級的位置，那出去的部分會(huì)被截掉
解決方法
給元素添加相對定位，或者給父級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><!--IE6下通過margin負(fù)值，使元素移出父級的位置，那出去的部分會(huì)被截掉解決方法給元素添加相對定位，或者給父級overflow:hidden;--><div class="box"><div></div></div></body> </html>#20、IE67下輸入類型的表單控件，上下兩邊各有1px的間隙
解決辦法
給控件加浮動(dòng)
代碼演示
<!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><!--IE67下輸入類型的表單控件，上下兩邊各有1px的間隙解決辦法給控件加浮動(dòng)--><div><input type="text" /></div></body> </html>#21、IE8以及IE8之前不識別H5標(biāo)簽
無法解決
代碼演示
<!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><!--IE8以及IE8之前不識別H5標(biāo)簽--><header>頭部</header><nav>導(dǎo)航</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><!--IE6不支持png-24透明圖片--><img src="img/1.png"/><div></div></body> </html>導(dǎo)入插件處理
<!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');/** 這個(gè)插件不支持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>總結(jié)
以上是生活随笔為你收集整理的WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WEB前端：浏览器（IE+Chrome+
- 下一篇： 前端面试中常见的算法问题