DIV CSS 佈局教程網

設計之痛 比女人還麻煩的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的屬性值就可以實現的效果卻折騰了這麼久呢。

於是我又回到原來的地方，把後來多加的屬性都去掉，用火狐浏覽器打開網頁文件，如下圖：

圖八

下面分析總結一下結果：

樣式表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;
}

最終想要的設計效果：