[問題] CSS做的選單在不同瀏覽器效果不同?

看板Web_Design作者 (高高的樹上結西瓜)時間16年前 (2009/07/15 23:12), 編輯推噓1(105)
留言6則, 3人參與, 最新討論串1/2 (看更多)
各位大大好,小弟試著用css做了一個選單 如圖所示:http://www.badongo.com/pic/6601294?size=original 左手邊的兩張圖(一張滑鼠在上面時)是在Firefox或IE 8時,顯示 出我想要的樣式。 而右手邊的兩張圖是在IE 6或IE 7出現的樣子…每個連結中間多了 一條線…我不想要這樣。 想請教各位前輩是否有可以改善的地方?讓不同瀏覽器顯示效果相同? 懇請指點迷津,謝謝! CSS內容如下… #local-navi { margin: 10px 0px; padding: 3px 6px; border-style: solid; border-width: 0px; width: 120px; float: left; background-color: #AAAAAA; } #local-navi h1 { margin: 2px 0px; padding: 0px; font-size: 9pt; font-weight: normal; text-align: center; } #local-navi ul { margin: 0px; padding: 0px; list-style: none; } #local-navi li { margin: 0px; padding: 0px; text-indent: 5px; } #local-navi a { display: block; margin: 0px; padding: 3px 0px; border-style: none; border-width: 0px 0px 0px 0px; text-decoration: none; color: #5A5A5A; } #local-navi a:link, #local-navi a:visited { background-color: #FFFFFF; } #local-navi a:hover { background-color: #AAAAAA; color: #FFFFFF; text-decoration: underline; } 而HTML只有如下… <div id="local-navi"> <h1>Menu1</h1> <ul> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> <li><a href = "#">LINK1</a></li> </ul> <h1></h1> </div> -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 219.85.167.121

07/16 09:33, , 1F
#local-navi a{*height:1%;} 牽涉到IE系列自訂的layout屬性
07/16 09:33, 1F

07/16 09:34, , 2F
所以針對ie6,ie7作星號hack
07/16 09:34, 2F

07/16 18:18, , 3F
哇~感謝k大的指點。不過可以請問*hack是什麼意思?加了
07/16 18:18, 3F

07/16 18:19, , 4F
*height: 1%的用意是什麼呢?
07/16 18:19, 4F
※ 編輯: QttNqq 來自: 219.85.167.121 (07/16 20:33)

07/17 23:13, , 5F
*加上去 , 因為firefox 會視為 attribute error 而跳過
07/17 23:13, 5F

07/17 23:13, , 6F
但是 ie 則能容這個錯 , 這是針對css特性所作的 css hack.
07/17 23:13, 6F
文章代碼(AID): #1ANV7Cqn (Web_Design)
文章代碼(AID): #1ANV7Cqn (Web_Design)