当通过 JavaScript 设置时，溢出：隐藏不适用于 Firefox 5

这已被证实是 Firefox 中的一个错误，您可以在以下位置了解更多信息：https://bugzilla.mozilla.org/show_bug.cgi?id=686247 https://bugzilla.mozilla.org/show_bug.cgi?id=686247

我正在设置overflow to hidden通过 jQuery，但它没有在 Firefox 5 中得到应用，而在其他浏览器中却得到了很好的应用。请自己测试一下这个jsfiddle来看看问题所在：http://jsfiddle.net/f4HJd/ http://jsfiddle.net/f4HJd/这是它在 Firefox 5 中的外观图像：https://i.stack.imgur.com/70zfy.png https://i.stack.imgur.com/70zfy.png和 Chrome 中的图像进行比较：https://i.stack.imgur.com/eKVPB.png https://i.stack.imgur.com/eKVPB.png出什么问题了overflow in FF5?

EDIT:

经过一些测试我发现overflow属性确实会应用于通过 JavaScript 动态添加的元素。因此，这意味着我们可以通过用其副本替换有问题的元素并应用来解决该错误overflow: hidden在 jQuery 中如下：

$('textarea').replaceWith($('textarea').clone().css('overflow', 'hidden'));

顺便说一句，我们甚至可以在可能的情况下避免替换元素，如下所示：

// for all browsers
$('textarea').css('overflow', 'hidden');
// for FF only
if ($.browser.mozilla) $('textarea').replaceWith($('textarea').clone());

EDIT 2:

进一步测试表明，overflow: hidden也得到很好的应用时position属性设置为absolute或者当display属性设置为block or inline-block，通过 CSS 静态或通过 JavaScript。所以，像这样的事情可以很容易地提供帮助：

$('textarea').css({ display: 'inline-block', overflow: 'hidden' });

EDIT 3:

问题似乎仅与 textarea 元素有关。我在 DIV 元素上测试了它，内容得到了很好的剪辑。所以，我怀疑这是因为 textarea 元素是内联的，并且 Overflow 属性适用于块级元素。

这似乎是 Firefox 中的一个错误。 jQuery 将溢出设置为隐藏的调用似乎在 Firefox 中不起作用，除非您首先将文本区域的 css 溢出设置为 css 或样式属性中的值，然后告诉 jQuery 将溢出设置为隐藏。

textarea {
    width: 100px;
    height: 100px;
    overflow:auto;
}

(function ($) {
    $(document).ready(function () {
        $('textarea').css('overflow', 'hidden');
    });
})(jQuery);

不过，我很好奇为什么你不直接为该文本区域创建一个 css 类，而是首先依赖 javascript 来隐藏它的滚动条。