Question

在我正在处理的应用程序中，我们有一个带有表单内容的固定高度模式。模态内容通常比模态更长，因此用户必须在模态容器内向下滚动才能查看并填写整个表单。

每个表单<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（非数字）。如果我将modalPadding变量中的modalBottom替换为15，如下面的代码所示，它也适用于Firefox：

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

显然，使用modalPadding变量的唯一原因是，如果我们更改模态内容的填充，我们就不必更新JS代码，这是不太可能的。尽管如此，无论我如何尝试将填充值解析为整数，Firefox都会返回NaN，这让我感到很恼火。

首先我认为它与parseInt的基数值有关（对于基数10应该是10）但是正如你所看到的那样，它在那里它仍然不起作用。

我还尝试使用parseFloat并使用.replace('px','')从值中删除“px”，然后尝试使用parseInt使值成为整数，除了NaN之外，它们都没有返回任何内容在Firefox中。

我正在运行Firefox 27.0.1。任何人都可以向我解释为什么Firefox不会解析我的填充？

Answer 1

Documentation说：

不支持速记CSS属性（例如边距，背景，边框）。例如，如果要检索渲染边距，请使用：$（elem）.css（'marginTop'）和$（elem）.css（'marginRight'），依此类推。

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

正如此live example所示，$.css在Firefox中不返回任何内容。

如果所有方向（左，右，顶部和底部）的填充为15px，那么只需获得一个：

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

Answer 2

Firefox可以挑剔。填充可以指左边填充，右边填充等。如果你知道所有填充都是相同的，试试这个：

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

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

查看this JSFiddle。

为什么Firefox从这个CSS填充值的parseInt返回NaN？

2 个答案: