瀏覽器之間的CSS問題

我正在從事網站設計工作，並且遇到無法在所有瀏覽器中正常工作的選項卡。該網站在這裏： http://www.designmeditations.com/stc4-1/瀏覽器之間的CSS問題

在當前版本的Chrome中，它看起來不錯。在FF中，它懸掛一個像素低。如果我將它向上移動一個像素，那麼它在FF中看起來很不錯，並且當您懸停時，Chrome中會在底部看到1像素線。

對此提出建議？我通常在無序列表元素上進行圖像轉換，但在這種特殊情況下，我沒有想到我需要使用圖像。

謝謝。

來源

2012-04-19 Seth

在Firefox，Chrome和IE9中對我來說似乎很好。您看到哪些問題與選項卡？ – 2012-04-19 03:23:58

我在FF中看到它......但我似乎已經將margin-bottom設置爲0來刪除它。 – Seth 2012-04-19 03:36:13

我看不出你所談論的區別，但使用選項卡的良好做法是以像素爲單位指明行高。嘗試添加line-height: 20px並從那裏調整。它很可能會解決這個差異。

#mainnav a { 
    background: transparent; 
    padding: 6px; 
    border: #0A4F91 solid 1px; 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    color: white; 
    text-decoration: none; 
    margin-right: 10px; 
    line-height: 20px; 
}

來源

2012-04-19 03:23:26 Duopixel

有趣;我會嘗試並讓你知道。我在Safari瀏覽器和FF上的Mac上查看了它，並且它們在兩個方面看起來都很好。我在我的電腦上看到它 - Windows 7，FF 11.0。 – Seth 2012-04-19 03:27:26

沒有工作。我仍然看到一個像素的差異。 – Seth 2012-04-19 03:30:35

我將底部邊距設置爲0，它工作。謝謝。 – Seth 2012-04-19 03:35:20

瀏覽器之間的CSS問題

回答

相關問題