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动态添加的元素。所以，这意味着我们可以通过用它的副本替换有问题的元素并在jQuery中将overflow: hidden应用到它来解决这个问题：

$('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属性设置为{{1}时，display也会得到很好的应用}或block，通过CSS静态或通过JavaScript。所以，这样的事情很容易帮助：

inline-block

编辑3：

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

Answer 1

这似乎是Firefox中的一个错误。除非你首先将textarea的css溢出设置为css或style属性中的值，然后告诉jQuery将overflow设置为hidden，否则从jQuery调用设置溢出等于隐藏的调用似乎不适用于Firefox。

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

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

虽然，我很好奇为什么你不只是为那个textarea创建一个css类，而不是依赖于javascript来隐藏它的滚动条。

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

1 个答案: