仅限于Chrome和Safari浏览器的CSS保证金问题

Question

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

任何想法可能是什么回事？任何帮助深表感谢！

Answer 1

变化：

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

要：

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

并添加类= “最后的孩子” 到您的列表：

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

我如果你想完全支持跨浏览器，这是完成这个任务的最简单的方法 - 正如早期的IE和Safari与伪类一样努力:last-child

希望这会有所帮助。

下面是一个例子：http://jsfiddle.net/DAyjz/