Проблемы с полями CSS только в Chrome и Safari - PullRequest
Новая
       24

Проблемы с полями CSS только в Chrome и Safari

1 голос
/ 26 февраля 2011

Я заканчиваю свой первый сайт: http://www.audio -agent.com / .

Я только что заметил, что, хотя он выглядит правильно в Firefox, отступы меню навигации и вертикальное выравнивание отключены при просмотре в Safari / Chrome.

Вот все CSS, которые я использую для меню: 

ul#navigation {
background:url(images/navBgSlice.png);
color:#fff;
padding:6px 40px 6px 40px;
font-size:14px;
text-transform:uppercase;
text-align:right;
}

ul#navigation a.current {
color:#fcff00;
}

ul#navigation a:link, ul#navigation a:visited,
p.flip a:link, p.flip a:visited {
font-weight:normal;
}

ul#navigation a:active, ul#navigation a:hover,
p.flip a:active, p.flip a:hover {
text-decoration:none;
}

ul#navigation li {
display:inline-block;
padding:0 10px;
}

ul#navigation li:last-child {
padding-right:0;
}

А HTML просто: 

<ul id="navigation">
    <a class="current" href="<?php blogInfo('url'); ?>"><li>Services</li></a> |
    <a href="<?php blogInfo('url'); ?>/clients"><li>Clients</li></a> |
    <a href="<?php blogInfo('url'); ?>/news"><li>News</li></a>
</ul>

Есть идеи, что может происходить? Любая помощь очень ценится!

1 Ответ

2 голосов
/ 26 февраля 2011

Изменение: 

ul#navigation li:last-child {
padding-right:0;
}

Кому: 

ul#navigation li.last-child {
padding-right:0;
}

И добавьте class = "last-child" в свой список:

<a href="<?php blogInfo('url'); ?>/news"><li class="last-child">News</li></a>

Если вам нужна полная кросс-браузерная поддержка, это самый простой способ сделать это - как раньше IE и Safari боролись с псевдоклассом :last-child

Надеюсь, это поможет.

Вот пример: http://jsfiddle.net/DAyjz/

...