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

來源:互聯網
上載者:User
瀏覽器|設計

設計之痛 比女人還麻煩的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;
}

最終想要的設計效果:



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。