CSS：爲什麼我浮動的<span>顯示在IE6/7中的<a> nchor上，但不是IE8/FF

Question

我在IE6/7（但不是ie8或firefox中）出現這個奇怪的CSS錯誤：出於某種原因，我的錨和<span>，在同一行上的兩個內聯元素顯示在不同的行上。跨度也向右邊漂移！

這裏的HTML：

<div class="sidebartextbg"><a href="journey.php" style="width:50%" 
    title="Track past, present and future milestones during your employment">Journey</a> 
<span class="notificationNumber">2</span> 
    <!-- JOURNEY COUNT: end --> 
    </div> 

和這裏的CSS：

.sidebartextbg { 
background:url("../images/sidebartextbg.gif") repeat-x scroll 0 0 transparent; 
border-bottom:1px solid #A3A88B; 
font-size:14px; 
line-height:18px; 
margin:0 auto; 
padding:5px 9px; 
width:270px; 
} 
.notificationNumber { 
background:url("../images/oval_edges.gif") no-repeat scroll 0 0 transparent; 
color:#FFFFFF; 
float:right; 
padding:0 7px; 
position:relative; 
text-align:center; 
width:17px; 
} 

這樣：爲什麼浮動跨度顯示在錨線下？謝謝！

Answer 1

只需將左浮動應用於您的錨標記，即可解決問題。

.sidebartextbg a {float:left;} 

Answer 2

有時它有助於設置zoom: 1;或position: relative;修復一些即loolz。

Answer 3

不知道你的實際問題的答案，但一個簡單的解決辦法是浮動你的錨左或在你的代碼中切換錨和跨度標籤。 （span，然後錨點）IE

<div class="sidebartextbg"> 
<span class="notificationNumber">2</span> 
<a href="journey.php" style="width:50%" title="">Journey</a> 
</div>