为什么 jQuery 不是针对“css('left', '+=42')”的 Chrome 的跨浏览器？答案

【问题标题】：Why jQuery is not crossbrowser with Chrome for "css('left', '+=42')"?为什么 jQuery 不是针对“css('left', '+=42')”的 Chrome 的跨浏览器？
【发布时间】：2014-11-24 04:14:03
【问题描述】：

举个例子比长篇大论好：http://jsfiddle.net/79a4eb37/ 在 firefox css('left', '+=42') 上工作，在 chrome 上没有...

当 left 属性未初始化时，不适用于 chrome。

【问题讨论】：

是的，冒犯性的语言确实需要表达你的挫败感。相反，你可以尝试几个选项来检查发生了什么。我之前为你编辑过。但你真的需要再次编辑它吗？
chrome 中的默认值可能与 firefox 中的默认值不同，导致 += 不起作用。
攻击性语言无关紧要，底部的文字类似于常见的“谢谢！”通常会从问题中删除的文本，因为它们与所提出的问题无关。
这个问题是合法的，但是你回答了问题中的问题。 “当 left 属性未初始化时，不适用于 chrome...” 解决方案是对其进行初始化。
在核心中修复它比简单地设置默认 css 样式要复杂得多。

标签： jquery google-chrome

【解决方案1】：

在 Chrome 中没有初始化就无法工作的原因是因为它是这样设计的。看看style function的jQuery源码：

    // convert relative number strings (+= or -=) to relative numbers. #7345
    if (type === "string" && (ret = rrelNum.exec(value))) {
        value = (ret[1] + 1) * ret[2] + parseFloat(jQuery.css(elem, name));
        // Fixes bug #9237
        type = "number";
    }

    // Make sure that NaN and null values aren't set. See: #7116
    if (value == null || type === "number" && isNaN(value)) {
        return;
    }

在 Chrome 部分中，parseFloat(jQuery.css(elem, name)) 将为 left 返回 NaN，因为在没有显式 left 样式的元素上的 jQuery.css(elem, name) 将返回 undefined。然后函数返回，因为计算的值无效。

但是，根据我的测试，在 FF 左侧将是 8px。没错，如果没有初始的left:0，你的小提琴会得到 108px 的偏移量（我相信你期望的是 100px）。

我想这是编写这样代码的主要原因 - 结果会因浏览器而异，并且 jQuery 不应该为您设置初始跨浏览器值 - 它可以分解 许多强>东西。使用“显式优于隐式”规则，只需将left 设置为 0。

【讨论】：