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

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

每个表单

都有一个小的工具提示，当它处于焦点时会显示在

下方。为了确保当用户在表单中使用Tab键或单击模式中当前滚动位置底部附近的表单字段时，此工具提示对用户可见，我编写了一些JavaScript/jQuery，以便在工具提示被模式底部隐藏时自动滚动内容

这是我的代码：

//一个元素的填充量应始终保持在底部
var=50；
//将焦点事件添加到表单元素
$（“.modal内容输入，.modal内容文本区域”）.focus（函数（）{
//获取相对于模态底部的元素底部位置
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；
//获取当前滚动位置
var modalScroll=$（'.modal content'）.scrollTop（）；
//如果元素的工具提示显示在可见区域之外，请滚动模式
if（与底部的距离<填充）{
var amountToScroll=填充+modalScroll+-与底部的距离；
$（'.modal content'）.animate（{scrollTop:amountToScroll}，250）；
}
});

如果事情看起来有点断章取义，不要担心；这里的问题出现在第8行，我使用

parseInt

获取内容区域的

padding

值的整数，用于计算内容的滚动量

.modal content

的填充值为

15px

。正如您所期望的，parseInt返回

15

，然后我可以将其添加到

modalBottom

变量中的其他值中。这在Chrome、Safari和Internet Explorer 8中非常有效

但是，在Firefox中，由于某种原因，这个parseInt总是返回

NaN

（不是一个数字）。如果我将

modalBottom

变量中的

modalPadding

替换为

15

，就像下面的代码一样，它也可以在Firefox中工作：

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

显然，使用

modalPadding

变量的唯一原因是，如果我们更改了模态内容的填充，就不必更新JS代码，这是不太可能的。不过，无论我如何将填充值解析为整数，Firefox都会返回一个

NaN

，这让我非常恼火

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

我还尝试使用

parseFloat

并用

从值中删除“px”。在尝试用parseInt将值设置为整数之前，替换（'px'，''）

，在Firefox中，这两种方法都只返回

NaN

我正在运行Firefox 27.0.1。有人能解释一下为什么Firefox不会解析我的填充吗？

说：

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

因此，您需要指定

paddingLeft

或

paddingTop

。。。等

如图所示，

$.css

在Firefox中不返回任何内容

如果所有方向（左、右、上、下）的填充都是15px，那么只需选择一个：

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

---

Firefox可能会对此很挑剔。Padding可以指Padding left、Padding right等。如果您知道所有Padding都是相同的，请尝试以下方法：

替换

var modalppadding=parseInt（$（'.modal content'）.css（'padding'），10）

与
var modalppadding=parseInt（$（'.modal content'）.css（'padding-left'），10）

退房。
哦，天哪，我会立即尝试使用
paddingBottom
。请稍候，等待接受答案。；）很有魅力，谢谢你！一有空就接受。谢谢。我写了一条评论说，
paddingLeft
可能不起作用，但现在我试着编辑它，以确认它和
paddingLeft
一样起作用。你的回答也是正确的。很好，谢谢你的澄清。很高兴您的问题得到了解决：）