2px在Chrome瀏覽器和其他瀏覽器之間的`outerHeight（）`

我正在研究這個自定義選擇菜單，這是我正在開發的一個表單插件的一部分。2px在Chrome瀏覽器和其他瀏覽器之間的`outerHeight（）`

在我的CSS我一直是這樣的：

.qval-select span { 
    font-size: 15px; 
    display: block; 
    padding: .3em .8em; 
    cursor: pointer; 
}

的span是從自定義選擇菜單中的項目。

在某些時候，我需要知道物品的outerHeight()並做一些計算。我遇到的問題是，Chrome報告的高度爲25px，其他所有瀏覽器（IE8，IE9，Firefox）報告爲27px。有趣的是，只有Chrome瀏覽器似乎獲得了我正在尋找的號碼。

要明白我的意思，我在這裏上傳一個例子：

http://spacirdesigns.com/idealforms/。

當您打開自定義選擇菜單並使用向上和向下箭頭滾動時，問題就很明顯。正如你所看到的，除了Chrome之外的每個瀏覽器都會計算2個額外的像素，並且搞砸了整個事情。
如果您打開控制檯，您可以看到高度的日誌並與其他瀏覽器進行比較。

如果我在px中設置高度爲span一切正常，但具有自定義選擇的美妙之處在於能夠適應多種尺寸，所以我需要em。我也嘗試在em中設置字體並更改字體，但沒有任何結果。

有人可以告訴我這裏發生了什麼，爲什麼？這讓我瘋狂。

scrollToItem: function() { 
    // Select.sub.scrollTop(0); 
    var idx = Select.items.find('.selected').parent().index(), 
     height = Select.items.outerHeight(), 
     items = Select.items.length, 
     allHeight = height * items, 
     curHeight = height * (items - idx); 
    console.log(height); 
    Select.sub.scrollTop(allHeight - curHeight); 
},

來源

2012-05-02 elclanrs

這是因爲EM基於瀏覽器。除此之外，沒有辦法解決這個問題。

Chrome說.3 EM = 5px，其他瀏覽器說6px。這是你的填充物，使高度更大，並且當你的填充物在EM中時，你會得到不同的高度。

來源

2012-05-02 03:33:11 DanRedux

是的，它必須是這樣的。但爲什麼Chrome只報告25px和所有其他27？ Chrome是唯一一個給我我想要的價值的人。沒有在px中設置任何其他方式？ – elclanrs

是的。你必須以任何規模的方式進行編碼。嘗試放大，在Chrome中，EM應該改變（可能不會，但仍然）。 EM是針對特定瀏覽器的，可以是不同的，所以只要拿它給你。一旦你有了價值，你在做什麼？ – DanRedux

我正在計算'scrollToItem（）'。見編輯... – elclanrs

2px在Chrome瀏覽器和其他瀏覽器之間的`outerHeight（）`

回答

相關問題