web前端開發中瀏覽器兼容問題（一）
瀏覽器兼容性問題又被稱爲網頁兼容性或網站兼容性問題，指網頁在各類瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。通俗的講，就是使用不一樣的瀏覽器（Firefox、Chrome、IE六、IE7等）訪問同一個網站，或者頁面的時候，在一個瀏覽器下顯示正常，在另外一個瀏覽器下就全亂了。這是由於不一樣的瀏覽器對CSS解釋不一樣。html
最經常使用到的瀏覽器express
最讓人頭疼的瀏覽器瀏覽器
那麼瀏覽器兼容性有些什麼問題呢？網站
1.div的垂直居中問題設計
• vertical-align：middle；code
• line-height: 200px;htm
• 將行距增長到和整個DIV同樣高 ，而後插入文字，就垂直居中了。圖片
• 缺點是要控制內容不要換行。ip
2.margin加倍的問題文檔
• 設置爲float的div在ie下設置的margin會加倍。
這是一個IE6都存在的bug
• 解決方案是在這個div裏面加上display:inline;
<div id=」 Iamfloat 」></div>
#Iamfloat{
float:left;
margin:5px;/*IE下理解爲10px*/
display:inline;/*IE下再理解爲5px*/
}
display: inline; 默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
3.浮動IE產生雙倍距離問題
#box{
float:left; width:100px;
margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離
display:inline; //使浮動忽略
}
• 這裏細說一下block與inline兩個元素：
block元素的特色：老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);
Inline元素的特色：和其餘元素在同一行上,不可控制(內嵌元素);
#box{
display:block; //能夠爲內嵌元素模擬爲塊元素
display:inline; //實現同一行排列的效果
diplay:table;
...
4.IE與寬度和高度的問題
• IE 不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。
• 好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣：
#box{ width: 80px; height: 35px;}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
5.頁面的最小寬度問題
• min -width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當作最小寬度來使。
• 爲了讓這一命令在IE上也能用，能夠把一個<div> 放到 <body> 標籤下，而後爲div指定一個類, 而後CSS這樣設計：
#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
• 第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，它實際上經過Javascript的判斷來實現最小寬度。
缺點：這也會讓你的HTML文檔不太正規。
- 1. web前端開發中瀏覽器兼容問題（六）
- 2. web前端開發中瀏覽器兼容問題（二）
- 3. web前端開發中瀏覽器兼容問題（四）
- 4. web前端開發中瀏覽器兼容問題（五）
- 5. web前端開發中瀏覽器兼容問題（三）
- 6. 瀏覽器兼容處理 【web前端開發】瀏覽器兼容性處理
- 7. 前端瀏覽器兼容問題
- 8. 瀏覽器兼容性-前端開發
- 9. Web前端開發中會遇到的瀏覽器兼容問題（消滅bug②）
- 10. 前端開發瀏覽器兼容問題
- 更多相關文章...
- • XSLT 瀏覽器 - XSLT 教程
- • Opera 瀏覽器 - 瀏覽器信息
- • Docker容器實戰(一) - 封神Server端技術
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。