动态更改 DOM 元素边框时的 Webkit 回流问题
我有两个 div 元素，其中一个元素环绕另一个元素。然后我使用 JavaScript 在运行时向外部 div 添加边框。不知何故，当外边框发生变化时，基于 webkit 的浏览器不会进行重排。最终结果看起来很难看——内部 div 溢出了外部。 HTML 代码如下： [div id="outer][div id="inner" style="border: 纯蓝色; height: 50px;"][/div][/div]
事件处理程序也很简单： document.getElementById("outer").setAttribute("style", "border: Solid green")
当我发现这一点时我简直不敢相信，因为这是一个微不足道的回流任务。或者我错过了什么？有谁遇到类似的问题，有什么解决方法吗？谢谢。
I have two div elements where one wraps around the other. Then I use JavaScript to add border to the outer div in runtime. Somehow webkit based browser doesn't do a reflow when the outer border is changed. The end result looks ugly - the inner div overflows the outer. Here is the HTML code:
[div id="outer][div id="inner" style="border: solid blue; height: 50px;"][/div][/div]
Event handler is simple as well:
document.getElementById("outer").setAttribute("style", "border: solid green")
I couldn't believe it when I found this out since it's such a trivial reflow task. Or did I missing anything? Does anyone encounter similar problem, what's the workaround? Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
border: Solid green不声明任何尺寸，例如："border:1px Solid green"我认为重置不安全整个
style属性，因为您可能会弄乱其他一些东西。尝试向className添加一个类，这样会更简洁一些。border: solid greenDoesn't state any size, eg:"border:1px solid green"I don't think it's safe to reset the entire
styleattribute because you might mess up some other things. Try adding a class toclassName, which is a bit cleaner.如果将外部和内部设置为 float:left 它将按计划工作。然而，您要么需要给它一个固定的宽度，要么在 div（内部）内包含内容。
[div id="outer"][div id="inner"]文本[/div][/div]
If you set the outer and inner to float:left it will work as planned. However, you will either need to give it a fixed width or have content inside the div (inner).
[div id="outer"][div id="inner"]Text[/div][/div]