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

Size: px

Start display at page:

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

岚庾
2 years ago
Views:

1 HP / July 20, :58AM 以下為實例整理之格式網頁 : 中國科技大學首頁網址 : 觀察時間 : 民國 100 年 7 月 20 日觀察瀏覽器 :IE6 IE8 Firefox5 Chrome12 原始碼 : 見附檔摘要 IE6 IE8 正常 Google Chrome: 右欄中段之搜尋列高度過大 Firefox: 除右欄中段之搜尋列高度過大外, 同區之功能欄 ( 新竹校區網站地圖等 ) 有排版異常的情況主要由於功能欄使用之底圖 (background=" ") 與文字不相匹配, 產生重疊以 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 Edited 4 time(s). Last edit at 09/22/ :13AM by HP. HP / July 21, :25AM 幾個可能的實例 - Re: [CSS] 各主流瀏覽器不相容情形之網頁以下列出網址 : 醒吾技術學院 (incompatible in Firefox) 黎明技術學院 1 / 10

2 ( 除了 IE 以外, 應該都有問題 ) ( 這個網址比較特別, 最後一個分號 ; 要自己手打 ) Edited 4 time(s). Last edit at 07/23/ :35AM by HP. qaz / July 25, :22AM Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 : 司法院網頁 : 司法院網址 : 觀察時間 :7 月 25 日觀察瀏覽器 :IE8 Firefox5 google 有問題瀏覽器 :Firefox5 google google Firefox5 此搜尋列為不正常搜尋文字跑到下方 IE8 瀏覽器正常 IE8 Firefox5 google 都呈現此現象 Edited 3 time(s). Last edit at 08/28/ :23PM by qaz angela / July 26, :53PM 中華民國海軍 - Re: [CSS] 瀏覽器不相容情形之網頁實例網頁 : 中華民國海軍網址 : 觀察瀏覽器 :IE6 IE8 Firefox5 Chrome12 IE6&IE8 上面的圖都沒問題 Firefox5 Chrome12 上面的圖不見了 2 / 10

3 Edited 1 time(s). Last edit at 07/26/ :52PM by mepoadm. HP / July 27, :26AM Flash 兼容之語法 (IE/Firefox/Chrome): 以中華民國海軍首頁為例這個頁面上的內容需要較新版本的 Adobe Flash Player 相容性問題說明 : 首先, 此頁 IE 之外瀏覽器不相容之處主要是 Flash 動畫只能在 IE 正常呈現, 在 Firefox Chrome 中則無法正常呈現為簡化說明, 以下先舉出兼容 IE Firefox Chrome 等主流瀏覽器之 Flash 語法之後再針對中華民國海軍此實例作相容性之實作簡要來說, 第一段的 object 是給 IE 看的, 第二段有許多特殊註解 object 是給其他瀏覽器看的 ( 請注意, 第一行的 clsdi: 後面的 d 原為大寫, 但在此論壇冒號 : 後按大寫 D 會轉為表情符號, 故改為小寫, 但效果不變 ) 1. 跨瀏覽器兼容之 Flash 語法 1. 這個頁面上的內容需要較新版本的 Adobe Flash Player 2. 中華民國海軍首頁相容性實作 Flash 部份之原始碼 : 中華民國海軍此語法為比較早期的語法, 但基本上 IE 與 Firefox 都能接受基本上 param 的部份是給 IE 看的, embed 是給 Firefox 看的但為什麼在此例中 Firefox 還是看不到 Flash 呢? 這是因為檔名寫錯了我們可以看到 param 中的檔名是 top_pic.swf, 但在 embed 中的檔名卻是 flash.swf 這個原因雖然有點笨, 但也可以反應出網頁開發者在開發時往往忽略在不同瀏覽器的呈現效果這其實簡單注意一下就可以發現了但要兼容各主流瀏覽器的話, 還是以第一部份所舉的 Flash 語法編寫比較好 -- 另外補充一個同網站中發現的問題 : 在海軍獎章中, 原全部置中的網頁, 在 Firefox 及 Chrome 中突然變成了置左 Edited 3 time(s). Last edit at 08/03/ :53PM by HP. angela / August 01, :11PM 十三行博物館 Re: [CSS] 主流瀏覽器不相容情形之網頁實例 (2011) 網頁 : 新北市十三行博館 3 / 10

4 網址 :[url= 觀察時間 :8 月 1 日觀察瀏覽器 :IE8 Firefox5 Chrome12 Firefox5 Chrome12 上面回首頁的那欄字是直的, 而且空白處很大 IE6 IE8 上面的回首頁的那欄沒問題附圖 : [img] IE8 Firefox5 的圖 [img] Chrome12 的圖 Edited 3 time(s). Last edit at 08/28/ :29PM by angela qaz / August 02, :01AM Re: 國家圖書館遠距學園 - Re: [CSS] 瀏覽器不相容情形之網頁實例 Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 : 國家圖書館遠距學園網頁 : 國家圖書館遠距學園網址 : 觀察時間 :8 月 2 日觀察瀏覽器 : IE8 Firefox5 google 有問題瀏覽器 :IE8 Firefox5 google IE8 左側欄位方框較小, 出現捲軸, 把內文遮住重新整理後變為正常 Firefox google 左側欄為方框高度為正常, 但會出現不必要的捲軸縮小此左側欄位, 此欄位的箭頭按鈕會消失到最左側此無法再開啟 Edited 1 time(s). Last edit at 08/28/ :02PM by qaz / 10

5 HP / August 03, :17AM [CSS] 搜尋列 (input type="submit&quot<img class="mod_smileys_img" src=" alt="winking smiley" title="winking smiley"/> 高與寬的控制 : 中華民國司法院首頁為例相容性觀察說明及截圖 : -- 搜尋列主要 <form> 這個功能構成, 裡面包括兩個部份 1. 文字輸入列 :<input type="text"> 2. 送出按鈕 :<input type="submit"> 而瀏覽器呈現高與寬的差異主要就是在對以上三者解讀不同所造成的 IE submit default settings: input[type="button"], input['type="submit"] { padding: 1px 8px; border: 3px; margin: 0; } Firefox submit default settings: input[type="button"], input['type="submit"] { padding: 0 6px; border: 3px; margin: 0; } Chrome submit default settings: input[type="button"], input['type="submit"] { padding: 1 6px; border: 2px; margin: 2px; } 以司法院首頁為例,<form> 所代表的版面模型為 : IE: Firefox5: 寬 :150 高 :46 Margin-bottom: 14 Chrome12: 寬 :150 高 :52 Margin-bottom: 14 Edited 2 time(s). Last edit at 09/26/ :21PM by HP. qaz / August 08, :42AM 5 / 10

6 Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 : 行政院環保署網頁 : 行政院環保署網址 : 觀察時間 :8 月 8 日觀察瀏覽器 :IE8 Firefox5 google 有問題瀏覽器 :Firefox5 google google Firefox5 瀏覽器上方右側 [ 天下的爸爸都是一樣的 - 父親節快樂 ] 的文字下方此圖片往下移, 呈現留白背景和此文字 [ 綠色生活資訊網 Flash] IE8 瀏覽器正常 Edited 1 time(s). Last edit at 08/28/ :46PM by qaz angela / August 10, :30PM Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 (2011) 博物館入口網 _ 行政院文化建設委員會網頁 : 博物館入口網 - 行政院文化建設委員會網址 :[url= 觀察時間 :8 月 10 日觀察瀏覽器 :IE8 Firefox5 Chrome12 詳述 : 右邊的好站連結部分出線上下捲軸, 有問題的瀏覽器有 : IE8 Firefox5 Chrome12 右邊出現大片的空白處, 有問題的瀏覽器有 : IE8 近期活動的圖不見了, 有問題的瀏覽器有 :Firefox5 尋找博物館的動畫不見了, 有問題的瀏覽器有 :Firefox5 Chrome12 簡述 : [img] 附圖 : [img] IE8 的圖 [img] Firefox5 的圖 [img] 6 / 10

7 Chrome12 的圖 Edited 2 time(s). Last edit at 08/28/ :11PM by angela HP / August 10, :49PM [CSS/HTML] 十三行博物館網站跨瀏覽器不相容情形之改善建議一跨瀏覽器不相容情形描述 : 1. 網站導覽功能列文字原應以水平書寫, 但因瀏覽器不相容, 造成擠壓而成垂直書寫, 版本因而過大 2. 站內搜尋功能列因相同原因, 原以水平書寫部份轉為垂直書寫, 造成版面擠壓, 佔據版面過大區域, 影響呈現效果二不相容情形涵蓋瀏覽器 :Firefox 系列 Google Chrome IE7 標準模式 IE8 標準模式三不相容情形影響範圍 : 全網站四改善建議與分析分析 : 網站版面出現瀏覽器不相容之頂部之導覽功能區因使用多層表格進行版面排版, 同時又不必要地在第一層表格 ( 見所附原始碼 ) 將表格分為左中右三塊, 而將主要的導覽功能區壓縮在右區塊再加以將無任何內容之左中區塊設定佔據過大版面, 因此造成原為水平書寫之文字, 擠壓為垂直書寫改善建議 : 在可以改動原有排版模式的前提下, 建議取消第一層表格, 直接以第二層表格 A 及第二層表格 B 呈現, 同時將二份表格設定為水平置右 (align=right), 寬度設為 250px~300px ( 表格 A 應較表格 B 寬 ), 二表格之間加以換行如此即可以達到原設計之呈現效果 ( 經 Firefox 實測 ) 若在不改動原有原始碼架構的前提下, 建議將第一層表格的左與中區塊 ( 儲存格 1 與儲存格 2) 之寬度設壓低, 讓右區塊 ( 儲存格 3) 寬度至少佔有 350px 如此設定版面將能大致以原有設計呈現最後, 在整體設計上, 導覽功能區在原始設計上 ( 以 IE8 Quirks 模式之呈現為準 ) 距視窗 / 瀏覽器之上頂部仍有一段距離, 在使用者瀏覽時會造成瀏覽效率降低, 資訊呈現的不集中建議可縮小網站整體距頂部之距離, 提高資訊對使用者之可及性 ( 第一層表格 ) ( 儲存格 2) ( 第二 ( 第二層表格 B ) Edited 1 time(s). Last edit at 08/10/ :57PM by HP. 7 / 10

8 angela / August 13, :50PM Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 (2011) 行政院文化建設委員會網頁 : 行政院文化建設委員會網址 :[url= heckin=1[/url] 觀察時間 : 民國 100 年 8 月 13 日觀察瀏覽器 :IE8 Firefox5 Chrome12 Chrome12 主題網站列的部分沒有捲軸以至於一串網站, 讓網站地圖擠下去左邊出現一大塊空白處滑鼠移到圖片處不會放大圖片, 只會出現替代文字 IE8 FIRFOX5 都沒有問題 [img] IE8 FIRFOX5 的圖 [img] Chrome12 的圖 Edited 2 time(s). Last edit at 08/28/ :00PM by angela qaz / August 14, :19AM Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 : 內政部消防署網頁 : 內政部消防署網址 : 觀察時間 :8 月 12 日觀察瀏覽器 :IE8 Firefox5 google 有問題瀏覽器 :IE8 IE8 內文內容中下方連結圖片, [ 推薦主題 ] [ 防災宣導 ] [e 化服務台 ] 此下方連結圖片呈現黑白, 滑鼠移入置此圖連結才會恢復正常 Firefox5 google 此為正常瀏覽器 Edited 2 time(s). Last edit at 08/28/ :35PM by qaz qaz / August 20, :24AM Re: 宜蘭縣政府工務局 - Re: [CSS] 瀏覽器不相容情形之網頁實例 (2011) 網頁 : 宜蘭縣政府工務局網址 : 8 / 10

9 觀察時間 :8 月 20 日觀察瀏覽器 :IE8 Firefox5 google 有問題瀏覽器 :IE8 Firefox5 google IE8 Firefox5 google 瀏覽器皆有問題此網頁位置設計內容圖片等.. 都呈現不尋常的狀態例如 : 內容文字區域與下方 [ 大家來接管汙水變乾淨 ] 圖片此文字覆蓋於圖片上方每個瀏覽器, 皆有兩個搜尋列 Edited 1 time(s). Last edit at 08/28/ :35PM by qaz angela / August 20, :44PM Re: [CSS] 各主流瀏覽器不相容情形之網頁實例整理 (2011) 內政部戶政司網頁 : 內政部戶政司網址 :[url= 觀察時間 : 民國 100 年 8 月 20 日觀察瀏覽器 :IE8 Firefox5 Chrome12 Chrome12 左邊的導覽列重複 IE8 Firefox5 都正常 [img] IE8 and Firefox5 的圖 [img] Chrome12 的圖 Edited 2 time(s). Last edit at 08/28/ :14PM by angela HP / August 31, :09PM 大學選校互動系統 - [CSS] 主流瀏覽器不相容情形之網頁實例整理網頁 : 大學選校互動系統 ( 關於我們分頁 ) 網址 : 觀察時間 : 民國 100 年 8 月 31 日觀察瀏覽器 : IE6 IE8 Firefox5 Chrome12 不相容瀏覽器 :Firefox5 Chrome12 9 / 10

10 Powered by TCPDF ( 原始碼 : 見附檔 Chrom12 截圖 ( 相簿功能有異 ): Edited 2 time(s). Last edit at 09/01/ :36PM by HP. HP / January 02, :31PM 臺大校訊 NTU Newsletter (IE8/Chrome/Firefox) - Re: [CSS] 跨瀏覽器不相容情形之網頁實例整理網址 : 不相容瀏覽器 :IE8 Firefox3.6 Chrome16 之間皆有所不同 IE8 字比較不清楚一般事項校內外徵才的位置也和其他二個瀏覽器不一樣而 Chrome16 的臺大校訊的頂圖則是會和整體版面不一致, 整體版面會比頂圖大 IE8 Firefox3.6 Chrome16 Edited 3 time(s). Last edit at 03/01/ :10PM by mepoadm. 10 / 10

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/