CSS: почему мои плавающие <span>отображаются ниже <a>якоря в IE6 / 7, но не в IE8 / FF - PullRequest
Новая
       35

CSS: почему мои плавающие <span>отображаются ниже <a>якоря в IE6 / 7, но не в IE8 / FF

4 голосов
/ 01 июня 2010

Я получаю эту странную ошибку CSS в ie6 / 7 (но не в ie8 или firefox): по какой-то причине мой якорь и <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;
}

так: почему плавающий промежуток будет отображаться в строке под якорем? Спасибо!

Ответы [ 3 ]

4 голосов
/ 02 июня 2010

Просто примените левый float к вашему тегу привязки, который должен решить проблему. 

  .sidebartextbg a {float:left;}
0 голосов
/ 02 июня 2010

Не знаю ответа на ваш настоящий вопрос, но проще всего было бы переместить ваш якорь влево или переключить теги привязки и span в вашем коде. (охват, затем привязка) IE 

<div class="sidebartextbg">
<span class="notificationNumber">2</span>
<a href="journey.php" style="width:50%" title="">Journey</a>
</div>
0 голосов
/ 01 июня 2010

иногда помогает настроить zoom: 1; или position: relative; для исправления некоторых, например, loolz.

...