HTML-список разваливается с Chrome

0

Следующий код хорошо работает с firefox, но распадается на хром:

http://jsfiddle.net/4tYfY/4/

<body>
    <div id="footer"><ul>
<li class=""><a href="rolunk">1</a></li>
    <li class=""><a href="hotelek">2</a></li>
    <li class=""><a href="apartmanok">3</a></li>
    <li class=""><a href="impresszum">4</a></li>
    </ul>
<div class="clearfix"></div></div>
</body>

.clear, .clearfix{clear:both;}

#footer
{
    background-image: url('../images/footerLoopBg.png');
    height: 70px;
    line-height: 70px;
    text-align: center;
    vertical-align: middle;
    font-family: georgia;
    font-size: 1.1em;
    width: 100%;
}

#footer ul li
{
    display: inline-block;
    padding: 0px;
}
#footer ul li a
{
    color: #DB9FBD;
}
#footer li:after
{
    content: '|';
    padding: 5px;
    color: #DB9FBD;
}
#footer li:last-of-type:after {
    content: "";
}
  • 2
    ХОРОШО. А твой вопрос?
  • 1
    Добро пожаловать в жесткий мир веб-дизайнеров
Показать ещё 1 комментарий
Теги:

6 ответов

1
Лучший ответ

Добавить:

#footer ul li { vertical-align: top;}

демонстрация

Поделиться
  • 0
    Это просто визуальное решение. Если вы осмотрите элемент в chrome, вы увидите, что 4 элемента все еще больше, чем другие, попробуйте добавить bg.
  • 0
    Да, и последний элемент li все еще имеет свое: после псевдоэлемента снизу. Это наверняка вызовет другие проблемы на макете.
Показать ещё 4 комментария
1

Проблема заключается в том, когда вы удаляете content для последнего элемента:

#footer li:last-of-type:after {
  content: "";
}

Лучше попробуйте это:

#footer li:last-of-type:after {
  display:none;
}

Демонстрация http://jsfiddle.net/4tYfY/24/

Поделиться
1

Вам не нужно менять css. В вашем css нет ничего плохого. В вашем html-то что-то не так. См. Код ниже

<body>
<div id="footer">
    <ul>
        <li class="">   <a href="rolunk">1</a></li>
        <li class="">   <a href="hotelek">2</a></li>
        <li class="">   <a href="apartmanok">3</a></li>
        <li class="">   <a href="impresszum">4</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

Проверьте эту скрипку здесь. Я не изменил ни одного css.

Поделиться
1

Проблема в вашем коде заключается в том, что в последнем элементе li все еще есть: после псевдоэлемента. Таким образом, даже если элемент after после этого не имеет больше "|", он по-прежнему является шириной элемента, заполняющей 5px.

Чтобы исправить это:

#footer li:last-of-type:after {
  display: none;
}
Поделиться
1

DEMO

#footer ul li
{
    display: inline;
    padding: 0px;
}
Поделиться
1

Я обнаружил, что для этого исправления работают две вещи, которые вы можете добавить:

    #footer ul li 
       { 
         vertical-align: top;
       }

или удалить

content: "";
Поделиться
  • 0
    "контент" нужен, спасибо, кто-нибудь дал ответ быстрее :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню