Question

我有一些js代码在运行时切换“溢出”属性，并获取使用“width：100％”的内部元素的大小信息。见这里：jsFiddle Demo URL。

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

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

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

Answer 1

您需要指示浏览器重新绘制元素。有一个stackoverflow问题，答案很好：How can I force WebKit to redraw/repaint to propagate style changes?

$('#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

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

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

3 个答案: