仅在Chrome&苹果浏览器

时间:2011-02-25 21:53:43

标签: css layout google-chrome safari padding

我正在完成我的第一个网站: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 个答案:

答案 0 :(得分:2)

更改:

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/