鉻上的css填充問題

我設計了一個使用css的導航列表。下面是我的代碼鉻上的css填充問題

ul#mainnavigation li a { 
    font: 14px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif; 
    position:relative; 
    font-weight:600; 
    color:#686868; 
    margin:0; 
    padding:0 19.7px; 
    height:50px; 
    line-height:50px; 
    display:inline-block; 
    -webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear; 
    -moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear; 
    -o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear; 
    transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear; 
    z-index:100; 
}

，即時通訊有是在Firefox它完美的作品，但在Chrome中最後的導航元素就沒了下文的問題。

在Firefox padding:0 25.7px;

給出正確的結果

鉻padding: 0 26.5px;給出正確的結果

我怎樣才能確保填充作用於正確的兩瀏覽器？

注：我已經定義正如你發現，不同的瀏覽器經常渲染相同的元素略有不同的像素大小的文檔類型爲<!DOCTYPE html>

來源

2013-02-04 LiveEn

你使用重置樣式表..？ – dmp

你可以讓jsfiddle？ – Selvamani

我的猜測是，兩個瀏覽器計算你的小數像素寬度不同。對於這個問題，當使用像素時，你正在處理可以在屏幕上使用的最有限單位，那麼爲什麼你甚至需要一個小數？只需使用25或26，然後無論如何它都應該是通用的。 – Michael

- 這往往是因爲字體大小和瀏覽器如何縮放字體，但可以出於各種原因。

我的建議是：

1）如果導航菜單必須是50像素高，皮中的元素，以留下更多的空間用於瀏覽器的一點點引起的問題，或者：

2）你也可以刪除菜單上硬編碼的50px高度，並讓它自動縮放以適應其元素。如果菜單內的任何內容被浮動，則刪除菜單容器上的「height」屬性並添加「overflow：hidden;」屬性到你的CSS應該會導致菜單展開到它裏面的所有東西的高度。

來源

2013-02-04 15:40:39 Sean

鉻上的css填充問題

回答

相關問題