僅限於Chrome和Safari瀏覽器的CSS保證金問題

我正在完成我的第一個網站：http://www.audio-agent.com/。僅限於Chrome和Safari瀏覽器的CSS保證金問題

我剛剛注意到，儘管在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>

任何想法可能是什麼回事？任何幫助深表感謝！

來源

2011-02-25 R.J.

變化：

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/

來源

2011-02-25 22:00:20 TNC

@True北創意：謝謝，這似乎是一個問題！但是現在我的填充不會在最右側的導航項中消除。不是一個大問題，但是有什麼方法可以保持這個功能嗎？ – 2011-02-25 22:05:02

編輯我的帖子，讓你直。 – TNC 2011-02-25 22:11:29

@True North Creative：好的，那可以。謝謝你的幫助！ – 2011-02-25 22:18:46

僅限於Chrome和Safari瀏覽器的CSS保證金問題

回答

相關問題