我正在完成我的第一个站点: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>
知道会发生什么吗?非常感谢任何帮助!
最佳答案
变化:
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/
关于仅在 Chrome 和 Safari 中存在 CSS 边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5123141/