WebKit 重绘神秘行为：解决样式更改
在 Web 开发领域，确保跨浏览器的外观一致可能会带来挑战。当尝试在基于 WebKit 的浏览器（例如 Chrome、Safari）中使用 JavaScript 应用样式更改时，就会出现这样的问题。
考虑以下 JavaScript 代码：
sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;此代码旨在修改 ID 为“my_id”的元素的类属性。然而，在 WebKit 浏览器中，只有第一个受影响的后代同级元素会更新，而第二个则保持不变，即使它们是已修改元素的直接同级元素。
有趣的是，在 Chrome 的“开发人员工具”中，只需切换任何元素即可任何元素的属性都会触发第二个同级元素的正确呈现。这表明 WebKit 需要“推动”来传播样式更改。
简单而有效的解决方案
在探索了各种无效的建议之后，一个简单而优雅的解决方案出现在瓦西尔·丁科夫评论。要在 WebKit 中强制重绘，请执行以下命令：
sel.style.display='none'; sel.offsetHeight; // Reference is sufficient, no need to store the value sel.style.display='';
此技术隐藏元素（“sel”），读取其 offsetHeight（非隐藏元素的非零属性），然后取消隐藏元素。这种微妙的操作会触发重绘，传播预期的样式更改。
其他注意事项
此解决方案是否适用于“块”之外的样式更改还有待测试财产。不过，对于笔者的情况来说，却提供了一个直接有效的解决方案。通过消除样式传播中的不一致，它确保了基于 WebKit 的浏览器之间视觉上一致的网页。
以上是为什么 WebKit 浏览器需要'推动”来传播通过 JavaScript 所做的样式更改？的详细内容。更多信息请关注PHP中文网其他相关文章！
