WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【01】
#兼容問題目錄
1、IE6下怪異盒模型
2、IE6下最小高度問題
3、IE6下不支持1px的點線
4、IE6下內容會把父級的高度撐開
5、IE6下只支持給a標簽添加偽類
6、IE67下不支持給塊標簽加display:inline-block
7、IE8以及IE8以前的瀏覽器都不支持opacity
后續兼容性問題處理鏈接地址：
http://blog.csdn.net/baidu_37107022/article/details/71973570
http://blog.csdn.net/baidu_37107022/article/details/71977053
#1、IE6下怪異盒模型
在標準模式下的盒模型，
在怪異模式下的盒模型，
盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;解決辦法
在css3中有一個屬性box-sizing來處理是用何種模型進行解析。
box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用標準模式解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用怪異模式解析計算；
目前使用此屬性需要前綴如下:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
代碼演示
<html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;border: 10px solid #000;padding: 10px;background: red;}</style></head><body><!--標準盒模型總寬度=width+padding+border怪異盒模型總寬度=width注意此時是沒有<!DOCTYPE html>聲明的 --><div>123</div></body> </html>什么是盒模型鏈接：http://blog.csdn.net/baidu_37107022/article/details/71272900
#2、IE6下最小高度問題
解決辦法
1、overflow:hidden 推薦
2、font-size: 0;
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{height: 1px;background: red;/*font-size: 0;*/}</style></head><body><!--IE6下塊元素高度小于19px，會被當做19px來處理解決辦法1、overflow:hidden 推薦2、font-size: 0; --><div></div></body> </html>#3、IE6下不支持1px的點線
解決辦法：
IE6不支持一像素的點劃線，用背景圖代替
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 500px;height: 100px;border: 1px dotted #f00;}</style></head><body><!--IE6不支持一像素的點劃線，用背景圖代替--><div></div></body> </html>#4、IE6下內容會把父級的高度撐開
解決辦法
overflow: hidden;
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;border: 1px solid #000;overflow: hidden;}</style></head><body><!--IE6下內容會把父級的高度撐開解決辦法overflow: hidden;--><div>這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊</div></body> </html>#5、IE6下只支持給a標簽添加偽類
IE6不支持除了a標簽以外標簽的偽類—無法解決
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>a:hover{color: #f00;}div{width: 100px;height: 100px;background: red;}div:hover{background: green;}</style></head><body><!--IE6不支持除了a標簽以外標簽的偽類--><a href="#">kaivon</a><div></div></body> </html>#6、IE67下不支持給塊標簽加display:inline-block
無法解決
**根本原因：**IE6、7不認識inline-block，給行內元素加上這個屬性后會觸發IE的haslayout特點，會讓行內元素具有與inline-block一樣的特征，所以它不支持塊元素的inline-block。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>span,div{width: 100px;height: 100px;background: red;display: inline-block;}</style></head><body><!--IE67不支持塊元素display:inline-block--><div>kaivon1</div><div>kaivon2</div><span>kaivon1</span><span>kaivon2</span></body> </html>普通瀏覽器中效果
IE7中效果
#7、IE8以及IE8以前的瀏覽器都不支持opacity
解決辦法
用filter
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: red;opacity: 0.5;filter:alpha(opacity=50);}</style></head><body><!--IE8以及IE8以前的瀏覽器都不支持opacity解決辦法用filter--><div>kaivon</div></body> </html>總結
以上是生活随笔為你收集整理的WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【01】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【小练习06】HTML+CSS--教学大
- 下一篇： WEB前端：浏览器（IE+Chrome+