min-height 兼容


瀏覽器兼容問題:標簽最低高度設置min-height不兼容

問題症狀:因為min-height本身就是一個不兼容的CSS屬性,所以設置min-height時不能很好的被各個瀏覽器兼容

碰到幾率:5%

解決方案:如果我們要設置一個標簽的最小高度200px,需要進行的設置為:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備注:在B/S系統前端開時,有很多情況下我們又這種需求。當內容小於一個值(如300px)時。容器的高度為300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個兼容性問題。

 

  1. /* CSS hack*/ 

我很少使用hacker的,可能是個人習慣吧,我不喜歡寫的代碼IE不兼容,然后用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

◆IE6認識的hacker 是下划線_ 和星號 *

◆IE7 遨游認識的hacker是星號 *

比如這樣一個CSS設置:

  1. 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.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM