在放上 Firefox 樣式所提供的 Header 之後,我發現自己的 Blog 變得在 Firefox 中無法使用樣式表,所有在樣式表之中的設定在 Firefox 瀏覽下都無效,變得很陽春,本來以為只是一個簡單的樣式表套用問題,沒想到實際上還是回到了相容性問題上。而這次,我與少數的朋友一樣,碰到的是 DOCTYPE 語法定義 DTD 的問題。

曾經在某個 Blog 上看到一篇文章,大體是說為了符合 W3C 格式,所以加上了 DOCTYPE 這段語法,後來造成網站內容讀取時秀出亂碼的問題。我在抓我自己這個問題的時候,也考慮到了這一方面的問題,所以特別試了幾段在 W3.ORG 中一篇 List of valid DTDs you can use in your document 的幾的不同的 DTD 標頭。

修好了 Firefox 之後,我發現在 IE 中瀏覽時,整個 Header 變得有點怪,它的 CSS 對位語法本來應該將 Search Bar 顯示在右上角,但是偏偏不這麼顯示,我嘗試用了幾種 CSS 語法來修正它,沒想到它居然一點動靜都沒有。這與 Firefox 原先所發生的完全不套用樣式又不同,它有套用樣式,就是在 Search Bar 部分的 TOP/RIGHT 不套用。

經過了幾次試驗,我發現我的 CSS 語法根本沒有問題,問題是發生在瀏覽器端的,於是,原本 IE 正常時的 DTD 與現在 Firefox 正常的 DTD 都抄了下來:

for IE
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

for Firefox
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>

然後寫了一段簡單的 PHP 程式碼,用來判斷 Client 端瀏覽器,該是 Firefox 的用 Firefox 相容 DTD,該是 IE 的就用 IE 相容的 DTD:

<?
$ua = $_SERVER[‘HTTP_USER_AGENT’];
$MSIE = (stristr($ua, “MSIE”) || stristr($ua, “Internet Explorer”));
$Moz4 = stristr($ua, “Mozilla/4”);
$Moz5 = stristr($ua, “Mozilla/5”);

if ($MSIE==true) {
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<?
} else {
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
<?
}
?>

接著在 MT 所有的模板中的第一行都 Include 這一支 PHP 程式,原來的 DTD 取消掉,由程式判斷該發出哪一組 DTD,完整解決兩個劉覽器各自的問題。收工~

最後修改日期: 2004-09-30