<ul>显示不正确 - 在除Firefox 2(包含屏幕截图)</ul>之外的所有浏览器中都能正常工作

时间:2010-04-07 16:26:44

标签: css firefox xhtml firefox2

好的,这是截图 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中使用这个非常糟糕的东西。

杰克

1 个答案:

答案 0 :(得分:1)

ul#voteOptions li { clear: both; }是否解决了这个问题?