由於不同廠商的瀏覽器展現出來的效果會有差異,因此網頁設計師發展出 CSS hacks 來解決跨瀏覽器的差異性。在此筆者用 javascript 調整 LINK 元素的 HREF 屬性;達成不同瀏覽器載入不同風格表檔案。
使用此法,首先必須建立不同瀏覽器的外部風格表檔案。這個測試的檔案內容很簡單。例如 firefox.css 的內容是:
.cls {background:black; color:red}
只此一行。其它的瀏覽器檔案有 default.css, ie6.css, google.css, safari.css。其中的差別只是將 color 改成不同顏色。
然後將下面這段指令放在 HEAD 區塊間:
<LINK id='css' href="default.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
var o=document.getElementById('css');
if( navigator.vendor != undefined )
{
if( navigator.buildID )
o.href='firefox.css'; // Firefox
else
{
var google=/^google/gi;
var safari=/^apple/gi;
if( google.test( navigator.vendor ) )
o.href='google.css'; //Google Chrome
else if( safari.test( navigator.vendor ) )
o.href='safari.css'; //Apple Safari
}
}
else
{
var ie6=/msie 6/gi;
if( ie6.test( navigator.appVersion ) )
o.href='ie6.css'; //ie6
}
</script>
上面的程式,使用 navigator 物件的特徵,分辨不同的瀏覽器。下面是測試文字:
- 程式用法:
<div class=cls>
此段文字在 Firefox 是紅色。Google 是綠色。Safari 是藍色。
IE6 是黃色。
</div> - 執行結果:此段文字在 Firefox 是紅色。Google 是綠色。Safari 是藍色。 IE6 是黃色。
此測試在個人電腦成功執行,但是部落格不能使用 LINK 載入風格表檔案,所以看不出效果。此次測試只做到 IE6;下次補充 IE7, IE8。