css - 溢出 : hidden does not apply in Firefox 5 when set via JavaScript

Question

这已被确认为 Firefox 中的错误，您可以在 https://bugzilla.mozilla.org/show_bug.cgi?id=686247 了解更多信息。

我正在通过 jQuery 将 overflow 设置为 hidden 但它在 Firefox 5 中没有得到应用，而在其他浏览器中却得到了很好的应用。请测试此 jsfiddle 以查看问题:http://jsfiddle.net/f4HJd/这是它在 Firefox 5 中的外观图像:http://i.stack.imgur.com/70zfy.png和 Chrome 中的图像进行比较:http://i.stack.imgur.com/eKVPB.png FF5 中的 overflow 有什么问题？

编辑:

经过一些测试后，我发现 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());

编辑 2:

如进一步测试所示，当 position 属性设置为 absolute 或当 display 属性通过静态 CSS 或 JavaScript 设置为 block 或 inline-block。所以，像这样的东西可以很容易地帮上忙:

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

编辑 3:

问题似乎只与文本区域元素有关。我在 DIV 元素上对其进行了测试，内容得到了很好的剪辑。所以，我怀疑这是因为 textarea 元素是内联的，而 overflow 属性是为 block 级元素工作的。

Answer 1

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

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

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

尽管如此，我很好奇为什么您不只是为该文本区域创建一个 css 类，而不是首先依赖 javascript 来隐藏它的滚动条。