瀏覽器兼容問題:標簽最低高度設置min-height不兼容
問題症狀:因為min-height本身就是一個不兼容的CSS屬性,所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率:5%
解決方案:如果我們要設置一個標簽的最小高度200px,需要進行的設置為:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注:在B/S系統前端開時,有很多情況下我們又這種需求。當內容小於一個值(如300px)時。容器的高度為300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
- /* CSS hack*/
我很少使用hacker的,可能是個人習慣吧,我不喜歡寫的代碼IE不兼容,然后用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)
◆IE6認識的hacker 是下划線_ 和星號 *
◆IE7 遨游認識的hacker是星號 *
比如這樣一個CSS設置:
- height:300px;*height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時候會認為高時300px;繼續往下讀,他也認識*heihgt, 所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置,認為高度是200px。繼續往下讀,IE6還認識_height,所以他又會覆蓋掉200px高的設置,把高度設置為100px;
IE7和遨游也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了,因為它們不認識_height。所以它們會把高度解析為200px,剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先級相同且想沖突的屬性設置后一個會覆蓋掉前一個,所以書寫的次序是很重要的。
2.css中的width和padding
在ie7和ff中width寬度不包括padding,在ie6中width包括padding.