DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS必須考慮的浏覽器兼容的技巧
DIV+CSS必須考慮的浏覽器兼容的技巧
編輯:CSS詳解     

1,盒解釋器的不同解釋.#box{
width:600px; //for ie6.0-
width:500px; //for ff+ie6.0
}
#box{
width:600px!important //for ff
width:600px; //for ff+ie6.0
width :500px; //for ie6.0-
}

2,在ie中隱藏css,使用子選擇器

html>body #box{ }

3,只有ie識別

*html #box{ }

4,在ie/win有效而ie/max隱藏,使用反斜槓

5,給ie單獨定義樣式

6,浮動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; //for ff,模擬table的效果
}

7,

for oprea only
@media all and (min-width:0px){
#box{ }
}

8,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;
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved