把瀏覽器的害蟲變好蟲 CSS Filters
為了使IE4~IE5.5能夠正確的使用CSS，Tantek提供了一個Box Model Hack方法，它能解決IE4~IE5.5錯誤,使它呈現和IE 6.0一樣
舊瀏覽器分析成:
div#subcell {
position: absolute;
background-color: #FFFFFF;
padding: 20px 2.5%;
width: 95%;
left: 3%;
right: 2%;
top: 300px;
voice-family: "\"} 舊版瀏覽器視此為 結束符號
\"";
voice-family:inherit;
width: 90%;
}
<style type="text/css">
<!--
#headarea {
position: absolute;
left: 3%;
top: 20px;
right: 2%;
width:95%;
background-color: #FFFFFF;
}
div#subcell {
position: absolute;
background-color: #FFFFFF;
padding: 20px 2.5%;
width: 95%;
left: 3%;
right: 2%;
top: 300px;
voice-family: "\"}\"";
voice-family:inherit;
width: 90%;
}新版的瀏覽器解讀
-->
</style>
</head>
<body>
..................
<div id="subcell"><br />
<p class="blu">For unwed mothers
and abused women........</div>
</body>
</html>
瀏覽器執行此宣告, 開始在電腦內尋找voice-family file called "\" 為視障朋友閱讀網頁
Of course 找不到.
宣告voice-family:inherit;為了清除上面宣告,預防 有人的電腦 真有這奇怪的東西。
在CSS繼承權規則,越靠近目標 權力越大,IE6.0會執行
voice-family:inherit;大於
voice-family: "\"}\"";和執行width: 90%;優先於
width: 95%;
若要IE 6.0正確呈現 必須加上嚴格的DOCTYPE的宣告<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">notice:not loose or Transitional
若 連不上 原來的網頁 可按此
Matthias搜集不同DOCTYPE宣告造成的問題, 而且瀏覽器以standards 或 quirk模式 顯示作成表格
Try to avoid applying padding/borders and a fixed width to an element.
IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it's best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.
如果你打算深入瞭解Box Model,下面的資源對你有幫助:
Zeldman在他的著作 Designing with Web Standards跨平台網頁設計-使用Web標準技術 旗標 出版, 12章詳細的闡明了這個問題
Zeldman的著作 你可以用最快速度讀過,因為他是個論文高手 很會說 說很多,但不能保證 學習者能保有他們的興趣,堅持下去 精彩在後面
像這樣 利用瀏覽器的蟲,CSS hacks 針對不同的瀏覽器，發送不同的CSS, 目的在讓 新舊版瀏覽器分別套用 不同的樣式 , 以便新舊版瀏覽器皆能夠有 想要的版面設定,國外有很多文章探討,他們稱為CSS Filter,CSS偵測機制...
解決瀏覽器的蟲：一種最常見的方法是使用 @import來匯入相應的的CSS檔。Netscape4和IE4.0不支持@import所以將不會匯入CSS檔。
有好幾種方法.........待續
