溢出:隐藏在Firefox 5中通过JavaScript设置时不适用

Question

这被证实是Firefox中的一个错误,你可以在https://bugzilla.mozilla.org/show_bug.cgi?id=686247上了解更多相关信息.

我设置overflow到hidden通过jQuery,但它不会在Firefox 5得到应用,而在其他浏览器中它得到应用良好.请测试这个jsfiddle以自己查看问题:http://jsfiddle.net/f4HJd/这是一个关于它在Firefox 5中的外观的图像:http://i.stack.imgur.com/70zfy.png和一个那在Chrome中的图像进行比较:http://i.stack.imgur.com/eKVPB.png什么是错overflow的FF5？

编辑:

经过一些测试后,我发现该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:

作为进一步的试验表明,overflow: hidden也得到当应用以及position属性设置为absolute或当display属性被设置为block或inline-block通过CSS静态或通过JavaScript.所以,像这样的东西可以很容易地帮助:

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

编辑3:

问题似乎只与textarea元素有关.我在DIV元素上测试了它,内容得到了很好的修剪.因此,我怀疑是因为textarea元素是内联的,溢出属性适用于块级元素.

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 来隐藏它的滚动条。