为什么我的浮动在IE6/7中显示在nchor之下，而不是IE8/FF中

i'm getting this weird CSS bug in ie6/7 (but not in ie8 or firefox): for some reason, my anchor and <span>, two inline elements, which are on the same line, are being displayed on different lines. the span is floating to the right, too!

我在ie6/7中得到了这个奇怪的CSS bug(但不是在ie8或firefox中):出于某种原因，我的锚和，两个在同一条线上的内联元素，在不同的行上显示。跨度也向右浮动!

Here's the HTML:

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>

and here's the CSS:

这里是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;
}

so: why would the floated span be displayed on the line under the anchor? Thanks!

那么:为什么浮动跨度会显示在锚下的线上?谢谢!

3 个解决方案

#1

Just apply a left float to your anchor tag, that should fix the problem.

只需在锚标签上应用一个左浮动，就可以解决问题。

  .sidebartextbg a {float:left;}

#2

sometimes it helps to setup zoom: 1; or position: relative; to fix some ie loolz.

有时它有助于设置缩放:1;或位置:相对;修理一些ie浏览器。

#3

Don't know the answer to your actual question, but an easy fix would be to float your anchor left or switch the anchor and span tags in your code. (span, then anchor) IE

不知道实际问题的答案，但是一个简单的解决方法是将锚点向左浮动，或者在代码中切换锚点和跨度标记。(跨度,那么锚)IE

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

#1