CSS 边距问题仅在 Chrome 和 Chrome 中出现狩猎之旅

发布于 2024-10-19 07:05:56 字数 1167 浏览 1 评论 0原文

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

知道会发生什么吗？非常感谢任何帮助！

原文

I'm finishing up my first site: http://www.audio-agent.com/.

I just noticed that, while it looks correct in Firefox, the navigation menu padding and vertical alignment is off when viewed in Safari / Chrome.

Here's all the CSS I'm using for the menu:

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;
}

And the HTML is just:

<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>

Any idea what could be going on? Any help is much appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风月客 2024-10-26 07:05:56

更改：

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

至：

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

并将 class="last-child" 添加到您的列表中：

News

如果您想要完整的跨浏览器支持，这是最简单的方法完成这个 - 正如早期的 IE 和 Safari 与伪类 :last-child 的斗争一样，

希望这会有所帮助。

这是一个示例： http://jsfiddle.net/DAyjz/

Change:

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

To:

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

And add class="last-child" to your list:

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

If you want full cross-browser support, this is the simplest way to accomplish this - As earlier IE and Safari struggle with the pseudoclass :last-child

Hope this helps.

Here's an example: http://jsfiddle.net/DAyjz/

回复收藏 0 原文

~没有更多了~