[CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)

以下為實例整理之格式。

網頁：中國科技大學首頁

網址：http://www.cute.edu.tw/home_page.html

觀察時間：民國100年7月20日

觀察瀏覽器：IE6、IE8、Firefox5、Chrome12

原始碼：見附檔。

摘要
IE6、IE8正常。

Google Chrome：右欄中段之搜尋列高度過大。

Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(background=" http://www.cute.edu.tw/images/home_page_18.jpg ")與文字不相匹配，產生重疊。以Firebug觀察後發現原因為多了上下margin各12px，這是由於 Firefox 會將 <p> 前後都加上和「一行文字」同高的 margin，而該<p>段落所指定的font-size就是12px(class="text3")。同時，經檢視文件後發現網頁並無宣告 DOCTYPE，因此被 Firefox 判斷為 Quirks Mode，此為網頁其他部份呈現異常之主因。

此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Quirks Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。

IE6(效果和IE8類似)


Firefox