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