好的,这是截图 SUPPOSED 的样子:
ul displaying correctly http://i40.tinypic.com/2dqnd7d.png
这里有一个截图,介绍它在Firefox 2中的外观(在Mac和PC上)......
ul displaying incorrectly http://i43.tinypic.com/2mcfzgz.png
每个其他浏览器都正确(即使是IE6 ?!)。
源代码是使用Sprites的无序列表:悬停效果。以下是一些代码:
HTML:
<div id="votes">
<ul id="voteOptions">
<li id="labour"><a href="#">Labour</a></li>
<li id="conservative"><a href="#">Conservative</a></li>
<li id="libdem"><a href="#">Liberal Democrat</a></li>
</ul>
</div>
CSS:
#votes {
width:653px;
position:relative;
top:-440px;
margin-left:auto;
margin-right:auto;
}
ul#voteOptions li a{
height: 75px;
float: left;
text-indent: -9999px;
margin-bottom:50px;
}
ul#voteOptions li#labour a{
width: 653px;
background: url('votes.png') no-repeat 0px -2px;
}
ul#voteOptions li#labour a:hover{
background: url('votes.png') no-repeat 0px -77px;
}
ul#voteOptions li#conservative a{
width: 653px;
background: url('votes.png') no-repeat 0px -152px;
}
//...
//(etc. etc - code repeats for conservative and libdem, you get the idea).
那么我做错了什么?我已经尝试了很多东西,但似乎无法在FF2中使用这个非常糟糕的东西。
杰克
答案 0 :(得分:1)
ul#voteOptions li { clear: both; }
是否解决了这个问题?