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