爲什麼Firefox從CSS填充值的parseInt中返回NaN？

在我正在處理的一個應用程序中，我們有一個固定的高度模態與表單內容。模態內容通常比模態長，因此用戶必須在模態容器內向下滾動才能查看並填寫整個表單。爲什麼Firefox從CSS填充值的parseInt中返回NaN？

每個表格<input>也有一個小工具提示，當它在焦點時出現在<input>的下方。爲了確保這個工具提示對用戶來說是可見的，如果他們通過窗體標籤或者單擊模式中當前滾動位置底部附近的表單域，我寫了一些JavaScript/jQuery自動滾動內容工具提示將隱藏在模式的底部。

這是我的代碼：

// The amount of padding an element should always have to the bottom 
var padding = 50; 

// Add focus event to the form elements 
$(".modal-content input, .modal-content textarea").focus(function(){ 

    // Get element bottom position relative to modal bottom 
    var elementBottom = $(this).offset().top + $(this).height(); 

    var modalPadding = parseInt($('.modal-content').css('padding'), 10); 

    var modalBottom = $('.modal-content').offset().top + $('.modal-content').height() + modalPadding; 

    var distanceFromBottom = modalBottom - elementBottom; 

    // Get current scroll location 
    var modalScroll = $('.modal-content').scrollTop(); 

    // Scroll the modal if the element's tooltip would appear outside visible area 
    if (distanceFromBottom < padding){ 
     var amountToScroll = padding + modalScroll + -distanceFromBottom; 
     $('.modal-content').animate({ scrollTop: amountToScroll },250); 
    } 

});

如果事情似乎有點混亂斷章取義不要擔心;這裏的問題是在第8行，我使用parseInt獲取內容區域的一個整數padding值用於計算滾動內容的多少。

.modal-content的填充值爲15px。如您所料，parseInt返回15，然後我可以將其添加到我的modalBottom變量中的其他值。這完美地在Chrome,Safari和Internet Explorer 8。

但是，在Firefox中，出於某種原因，此parseInt始終返回NaN（非數字）。如果我在modalBottom變量與15在下面的代碼替換modalPadding一樣，它也可以在Firefox：

var modalBottom = $('.modal-content').offset().top + $('.modal-content').height() + 15;

顯然，對於使用的唯一原因modalPadding變量，這樣我們就不必更新JS代碼，如果我們改變模式內容的填充，這是不太可能的。儘管如此，無論我如何將填充值解析爲整數，Firefox都會返回NaN，這讓我很懊惱。

首先，我認爲它與parseInt的基數值（它應該是10爲10），但正如你可以看到我有它在那裏，它仍然無法正常工作。

我也嘗試使用parseFloat和刪除「PX」從價值與.replace('px','')企圖讓價值與parseInt函數，這兩者都不返回任何東西，但在Firefox NaN整數之前。

我正在運行Firefox 27.0.1。任何人都可以請向我解釋爲什麼Firefox不會解析我的填充？

來源

2014-02-27 Flux

Documentation說：

速記CSS屬性（如保證金，背景，邊框）不被支持。例如，如果要檢索渲染邊距，請使用：$（elem）.css（'marginTop'）和$（elem）.css（'marginRight'）等等。

因此，您需要指定paddingLeft或paddingTop ...etc

從這個live example中可以看到，$.css不會在Firefox中返回任何東西。

如果您的填充將是15px的所有方向（左，右，上，下），那麼只得到一個：

var modalPadding = parseInt($('.modal-content').css('paddingLeft'), 10);

來源

2014-02-27 14:09:01 Alvaro

噢我的，我會盡量使用'paddingBottom'來代替。請等待接受的答案。 ;） – Flux

工程就像一個魅力，謝謝你！將盡快接受。 – Flux

@villeman不客氣！ – Alvaro

火狐可以挑剔與此有關。填充可能是指填充左，右填充等，如果你知道所有的墊襯是相同的，試試這個：

更換 var modalPadding = parseInt($('.modal-content').css('padding'), 10);

隨着 var modalPadding = parseInt($('.modal-content').css('padding-left'), 10);

退房this JSFiddle。

來源

2014-02-27 14:13:09

謝謝。我寫了一條評論說''padding-left'可能不起作用，但現在只是試着編輯它來確認它和'paddingLeft'一樣。你的回答也是正確的。 – Flux

好的，謝謝你的澄清。很高興你的問題排序:) –

爲什麼Firefox從CSS填充值的parseInt中返回NaN？

回答

相關問題