Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

作業七/八跨瀏覽器修正建議 (IE6)

作業七/八跨瀏覽器修正建議 (IE6)

作業七範例網址:

http://mepopedia.com/~jinjin/web/hw07-w

修正後:
http://mepopedia.com/~jinjin/web/hw07


IE6 畫面:



作業七的範例網頁主要在 IE6 上會有問題:

1. Table 會跑得很下面(會超過左欄內容,也就是基本上浮動失效)

原因其實也不是浮動失效,主要是 table 寬度設為 100%,IE6 會覺得要用整個 DIV 的寬度,也就是 950px 作業寬度,因此跑到下面。

解決方式我猜測是把 table 寬度設一個固定的類似 750px (或以下) 就可以了。


2. 水平導覽列會換行

這個很明顯地是因為導覽列太寬。但為什麼只有在 IE6?這剛好就是之前提的 3-pixel bug(三像素間距問題)。

解決方式不易。一個是如果沒有美觀問題,就把水平導覽列的寬度調小到 IE6 不會換行為止。(但其他瀏覽器看起來會不好看)

另一個是在 HTML 裡的 ...中加入
<!--[if IE lte 6]> <style type="text/css"> #button li { margin-right:-3px; } </style> <![endif]-->

意思就是在 IE 版本小於等於6的時候,就會把 #button li 這個元素標籤給設一個 -3px 的 margin,把多出來的 3 pixel 給扣回來。


這個網站整理了眾多 IE 的問題(主要是 IE6):

http://www.positioniseverything.net/explorer.html



Edited 2 time(s). Last edit at 12/07/2011 08:09AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - IE6-作業七.gif (312.2 KB)