※ ChatGPTを利用し、要約された質問です（原文：liタグのナビボタンがFirefoxで二重に表示。）
liタグのナビボタンがFirefoxで二重に表示
liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？
<div id="sidebar">
<ul>
<li id="aaa"><a href=""><span>aaa</span></li>
<li id="bbb"><a href=""><span>bbb</span></li>
<li id="ccc"><a href=""><span>ccc</span></li>
</ul>
</div>
div#sidebar {
width: 245px;
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
div#sidebar ul li a {
display: block;
}
div#sidebar ul li a span {
position:absolute;
width: 0;
height: 0;
overflow:hidden;
}
ul li#aaa a {
width: 245px;
height: 60px;
background-image:url(image/aa.jpg);
background-position: 10px 20px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
ul li#bbb a {
width: 245px;
height: 60px;
background-image:url(image/bb.jpg);
background-position: 10px 20px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
ul li#ccc a {
width: 245px;
height: 60px;
background-image:url(image/cc.jpg);
background-position: 10px 20px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
お礼
質問の内容に不備があり、すみません。 border-bottom を #sidebar ul li でまとめたら出来ました！ ありがとうございました。