[問題] CSS做的選單在不同瀏覽器效果不同?
各位大大好,小弟試著用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
07/16 09:33, 1F
→
07/16 09:34, , 2F
07/16 09:34, 2F
→
07/16 18:18, , 3F
07/16 18:18, 3F
→
07/16 18:19, , 4F
07/16 18:19, 4F
※ 編輯: QttNqq 來自: 219.85.167.121 (07/16 20:33)
→
07/17 23:13, , 5F
07/17 23:13, 5F
→
07/17 23:13, , 6F
07/17 23:13, 6F
討論串 (同標題文章)
完整討論串 (本文為第 1 之 2 篇):