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

2021-04-17 06:51:36 字數 1233 閱讀 1014

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

最終想要的設計效果:

男人的痛女人永遠不知道!

1 女人永遠也不知道男人為什麼要學會堅強?因為他們自己知道.他們雖然外表堅強.但內心很脆弱.他們永遠想讓自己身邊的她覺得自己是最棒的.2 女人永遠也不知道男人為什麼不會輕易掉眼淚?因為他們自己知道.他們不是不會掉眼淚.只是他明白.一但眼淚掉下來了.這段感情也就結束了.3 女人永遠也不知道男人為什麼每...

收屍,不可掩埋之痛

我今天又做了一把孫子,在客戶面前當你處於無理狀態的時候就只能做孫子。這是這孫子俺做的非常不爽,因為俺是在給別人收屍才做的孫子。俺一直想問it人士乙個問題 你有好的職業道德嗎?你知道什麼叫做職業道德嗎?留下乙個尾巴就走人,有沒有一點責任心?沒有責任心的人如何能夠被信任,如果能夠做事?老子今天上午去面試...

天鵝湖之痛

終於放假了,可惜只有10天,更可惜的是我不能再像五一那樣蹬著我的輪鞋刷過合肥的大街小巷了。像乙隻折翼的鳥兒,我只能呆在自己的巢裡。想不到6月2日的天鵝湖之旅竟成了 天鵝淒美的絕唱 天鵝湖我不知刷過多少次,十公里都不到,這點路程對我來說不過是小菜一碟,以前都是晚上去的,來回40分鐘的樣子,權當是散步了...