瀏覽器兼容問題:標籤最低高度設置min-height不兼容css
問題症狀:由於min-height自己就是一個不兼容的CSS屬性,因此設置min-height時不能很好的被各個瀏覽器兼容前端
碰到概率:5%chrome
解決方案:若是咱們要設置一個標籤的最小高度200px,須要進行的設置爲:{min-height:200px; height:auto !important; height:200px; overflow:visible;}瀏覽器
備註:在B/S系統前端開時,有不少狀況下咱們又這種需求。當內容小於一個值(如300px)時。容器的高度爲300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。xml
我不多使用hacker的,多是我的習慣吧,我不喜歡寫的代碼IE不兼容,而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類:IE6 ;IE7和遨遊;其餘(IE8 chrome ff safari opera等)blog
◆IE6認識的hacker 是下劃線_ 和星號 *safari
◆IE7 遨遊認識的hacker是星號 *class
好比這樣一個CSS設置:import
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.