javascript - 更改容器上的“溢出”属性不会在运行时更改内部元素大小？

Question

我有一些 js 代码可以在运行时切换“溢出”属性并获取使用“宽度：100%”的内部元素的大小信息。请参见此处：jsFiddle 演示网址。

$('#container').css('overflow', 'hidden');
$('#size1').text('Inner element size at runtime: ' + $('#content').width());

我发现，当“溢出”在运行时从“自动”更改为“隐藏”时，IE10 和 Firefox 会改变内部元素的大小。但是在 Chrome 中，大小不会改变。

关于如何告诉 Chrome 更新内部元素的大小的任何想法？谢谢。

Answer 1

您需要指示浏览器重新绘制元素。这里有一个 stackoverflow 问题，答案很好：如何强制 WebKit 重绘/重绘以传播样式更改？

$('#container')
    .css('overflow', 'hidden')
    .each(function(){
        this.style.display='none';
        this.offsetHeight; 
        this.style.display='block';
    });

http://jsfiddle.net/XNtjh/

Answer 2

添加box-sizing:border-box到内部容器中。

#content {
    border: 1px solid red;
    width: 100%;
    height: 300px;
    box-sizing:border-box;
}

http://jsfiddle.net/gT5PD/

http://www.w3schools.com/CSSref/css3_pr_box-sizing.asp

Answer 3

这可能是因为当溢出设置为自动时，先前被滚动条占用的空间被释放了。