設計之痛 比女人還麻煩的IE瀏覽器

瀏覽器|設計

設計之痛 比女人還麻煩的IE瀏覽器

昨天幫朋友做頁面導航的樣式設計，要求連結加深灰色邊框、淺灰色背景，兩象素間距，我在想，這還不簡單，用CSS定義，幾下就搞定了，我開啟記事本（申明一點：高手向來都是用記事本搞定一切的 ^_^），不到一分鐘就完成了朋友所要求的效果，儲存代碼為htm格式，用IE瀏覽器開啟這個檔案，一看，傻眼了，很醜，不是一般的醜，（如圖一）趕忙開啟源檔案，修改了一下padding屬性，設定A的padding值為10px，再開啟，這下好多了，不過這次出現了一個嚴重的問題，A標記的上邊框線不翼而飛（如圖二），怎麼回事，好像以前沒有遇到過這樣的問題吧。我重新檢查了一下CSS樣式表代碼，一點沒錯，這是什麼原因呢？

圖一

圖二

圖三

於是我開啟DW，在DW的設計檢視中發現顯示效果與我預期的效果是一模一樣（如圖三），但怎麼在IE瀏覽器中顯示出來的效果如此糟糕呢？不僅沒有上邊框線，而且文字顯示在邊框的頂部，極不對稱，不美觀，於是我挖空心思尋找定義文本對其方式的CSS元素，可惜CSS中只有一個定義水平文本對齊的元素text-align，於是我自作聰明地生造了一個元素text-valign,定義成：text-valign:middle； 再儲存一看一點也沒有什麼變化，趕快刪除這個杜撰的元素，怎麼辦？於是我又在style中定義了這麼一句：border-top:1px solid #ccc;再儲存，一看，還是沒有什麼變化，看來問題不在這裡，沒有辦法，於是我又嘗試定義文本的行高，在裡面加了一句:line-height:28px;此時其在DR的設計試圖效果如圖四：

圖四

中間明顯多了白色的底紋，此時在IE中的效果如圖五：

圖五

文字已經是垂直置中了，但上邊框依舊還沒有出來，於是我再修改了一下padding值為padding:5px 10px; 也就是說上下內邊距為5px，左右內邊距為10px,此時其在DR中的設計檢視基本上沒有發生什麼大的變化，只不過變瘦了一點，如圖六：

圖六

然後重新整理IE瀏覽器，哇噻，這下撞對了，看看出來的效果圖七：

圖七

於是我納悶了，為什麼一個想起來很簡單的效果實現起來卻這麼困難呢，對於A標記的CSS定義，本來只要簡單地定義border、background-color和padding的屬性值就可以實現的效果卻折騰了這麼久呢。

於是我又回到原來的地方，把後來多加的屬性都去掉，用Firefox瀏覽器開啟網頁檔案，如下圖：

圖八

下面分析總結一下結果：

樣式表	IE瀏覽結果	Firefox瀏覽結果
a{ border:1px solid #ccc; background-color:#F3F3F3; font-size:12px; margin:1px; color:#333333; text-decoration:none; padding:10px; }
a{ border:1px solid #ccc; background-color:#F3F3F3; font-size:12px; margin:1px; color:#333333; text-decoration:none; padding:10px; line-height:28px; }
a{ border:1px solid #ccc; background-color:#F3F3F3; font-size:12px; margin:1px; color:#333333; text-decoration:none; padding:5px 10px; line-height:28px; }

最終想要的設計效果：