Change History
Message: [CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011)
Changed By: HP
Change Date: July 20, 2011 10:08PM
[CSS] 各主流瀏覽器不相容情形之網頁實例整理(2011): IE6、IE8、Firefox、Chrome (2011)
Change Date: July 20, 2011 10:08PM
[CSS] 各主流瀏覽器不相容情形之網頁實例整理(2011): IE6、IE8、Firefox、Chrome (2011)
以下為實例整理之格式。
網頁：中國科技大學首頁
網址：http://www.cute.edu.tw/home_page.html
觀察時間：民國100年7月20日
觀察瀏覽器：IE6、IE8、Firefox5、Chrome12
原始碼：見附檔。
摘要
IE6、IE8正常。Google Chrome：右欄中段之搜尋列高度過大。Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(backIE6、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
網頁：中國科技大學首頁
網址：http://www.cute.edu.tw/home_page.html
觀察時間：民國100年7月20日
觀察瀏覽器：IE6、IE8、Firefox5、Chrome12
原始碼：見附檔。
摘要
IE6、IE8正常。Google Chrome：右欄中段之搜尋列高度過大。Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(backIE6、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
Original Message
作者: HPDate: July 20, 2011 02:58AM
各主流瀏覽器不相容情形之網頁實例整理(2011): IE6、IE8、Firefox、Chrome (2011)
以下為實例整理之格式。
網頁：中國科技大學首頁
網址：http://www.cute.edu.tw/home_page.html
觀察時間：民國100年7月20日
觀察瀏IE6、IE8正常。Google Chrome：右欄中段之搜尋列高度過大。Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(background=" http://www.cute.edu.tw/images/home_page_18.jpg ")與文字不相匹配，產生重疊。以Firebug觀察後發現原因為多了上下margin各12px，經檢視文件後發現網頁並無宣告 DOCTYPE，因此被 Firefox 判斷為 Quirk Mode，此為網頁呈現異常之主因。
此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Qurik Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。
ks-mode.html>Quirks Mode，此為網頁其他部份呈現異常之主因。
此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Quirks Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。
IE6(效果和IE8類似)
Firefox
網頁：中國科技大學首頁
網址：http://www.cute.edu.tw/home_page.html
觀察時間：民國100年7月20日
觀察瀏IE6、IE8正常。Google Chrome：右欄中段之搜尋列高度過大。Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(background=" http://www.cute.edu.tw/images/home_page_18.jpg ")與文字不相匹配，產生重疊。以Firebug觀察後發現原因為多了上下margin各12px，經檢視文件後發現網頁並無宣告 DOCTYPE，因此被 Firefox 判斷為 Quirk Mode，此為網頁呈現異常之主因。
此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Qurik Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。
ks-mode.html>Quirks Mode，此為網頁其他部份呈現異常之主因。
此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Quirks Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。
IE6(效果和IE8類似)
Firefox