查看实际问题:http: //jsfiddle.net/krtGd/1/
我在 float 中有一个嵌入式 SVG 元素div
,如下所示:
<div style="float: left;">
<svg width="50" height="20" id="svg1">
</svg>
</div>
这很好用;在div
SVG 周围符合预期。但是,当我使用 JavaScript 调整 SVG 的大小时,如下所示:
$('#svg2').attr('width', 50);
... SVG 正确调整大小,但它周围的框没有。正如您在 jsFiddle 中看到的那样,如果包含div
具有display:inline-block
而不是浮动样式,则同样的情况也是如此。
这里奇怪的是,让我相信这是一个回流问题而不是一个简单的布局问题的是,如果您检查 Chrome 控制台元素面板中的任何一个问题元素,这些div
元素都会正确调整大小。此问题可能仅适用于 Google Chrome - 我在Chrome OSX v.20.0.1132.57中看到它,但在 Safari 中没有。我没有在 FF 或 IE 中测试过。
那么:如何在 Chrome 中强制重排?
我已经尝试了通常的嫌疑人,包括检查div.offsetHeight
,svg.getBBox()
和其他几个变体。