DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS不同浏覽器兼容問題
CSS不同浏覽器兼容問題
編輯:布局實例     

IE5.X/win對box-model的解析是一樣的,他們認為width包括了邊框(border)和補白(padding),幸運的是這個情況在IE6中有了好轉
但是IE6在向後兼容的同時也包容了以前的錯誤,IE6其實有兩個核心,在舊的頁面前他仍舊表現出對錯誤的寬容,只有在文檔中嚴格地加上文檔類型(DOCTYPE)聲明,IE6才能夠接受正確的box-model
所以,tantak的hack必須和正確的DOCTYPE同時包含在文檔中才能夠正常工作
Quote
div.content {
width:400px; //這個是錯誤的width,所有浏覽器都讀到了
voice-family: ""}""; //IE5.X/win忽略了""}""後的內容
voice-family:inherit;
width:300px; //包括IE6/win在內的部分浏覽器讀到這句,新的數值(300px)覆蓋掉了舊的
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支持CSS2該寫法的浏覽器有幸讀到了這一句
}
現在回到主題,我們經常看到!important和(空格)/**/:組合在一起使用,這個寫法有什麼奧妙呢?

看剛才那個寫法,我這裡可以提供另一種寫法也能達到這樣的效果
Quote
div.content {
width:300px !important; //這個是正確的width,大部分支持!important標記的浏覽器使用這裡的數值
width(空格)/**/:400px; //IE6/win不解析這句,所以IE6/win仍然認為width的值是300px;而IE5.X/win讀到這句,新的數值(400px)覆蓋掉了舊的,因為!important標記對他們不起作用
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支持CSS2該寫法的浏覽器有幸讀到了這一句
}
同樣,這個方法仍必須依靠正確的文檔類型聲明才能夠正常工作,原因在前面已經說過。

文檔類型聲明就像一個開關,打開向後兼容的未來,而錯誤使用的話,就是一個Pandora box
 

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