css div и span по-разному отображаются в браузерах. Как унифицировать?

У меня есть CSS-файл, который правильно отображается в FF12, но отличается в Safari и Chrome.

Если изображения не загружаются, посмотрите живой демонстрационный пример на http://beattrack.net/test.php.

Вот как это должно выглядеть и выглядит в FF:

А вот что происходит в Safari и Chrome:

Вот соответствующие CSS и HTML:

<style type="text/css">
    #topbar p.infotext {
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 15px;
        color: #D8DFEA;
    }
    #topbar a.name, #topbar a.home {
        font-weight: bold;
        margin-top: 4px;
        line-height: 32px;
        font-size: 13px;
        text-align: right;
        color: #D8DFEA;
        padding-left: 12px;
        float: right;
        text-decoration: none;
        padding-right: 0px;
    }
    .divider {
        margin-top: 7px;
        line-height: 19px;
        border-right: 1px solid #5CCD3E;        
        float: right;
    }
</style>

<html>
  <div id="topbar">
    <a class="home" href="#">Home   <span class="divider"> </span></a>
    <a class="name" href="#"><?php echo $first_name . " " . $last_name . "   ";?>
    <span class="divider"> </span>
    </a>
  </div>
</html>
stevenspiel
Редактировал вопрос 7-го июня 2012 в 10:59
Программирование
google-chrome css browser divider
7-го июня 2012 в 3:58
18 просмотров

Добавление ширины должно заставить его работать.

#topbar a.home, #topbar a.name {width : 70px;}
Комментарии (1)

попробуйте это:

.divider {
    position:relative;
    top: 7px;
    line-height: 19px;
    border-right: 1px solid #5CCD3E;        
    float: right;
}
Комментарии (0)

Оказалось, что это была проблема с HTML.

Когда я удалил "&nbsp" после текста, все отлично заработало.

  <div id="topbar">
    <a class="home" href="#">Home
    <span class="divider"> </span></a>
    <a class="name" href="#">
    <?php
    echo $full_name." ".$tel;
    ?>
    <span class="divider"> </span>
    </a>
  </div>

Я буду рад любым отзывам о том, почему это сработало...

Комментарии (1)