有时候，你会发现，在一些JS应用中，涉及到CSS的重新渲染（即页面样式需要更新）的话，IE死活不变。 此时你需要让IE重新渲染一下： function handleIEhasLayout(){ //trigger re-rendering document.body.style.zoom = 1.1; //restore it document.body.style.zoom = ”; } 有问题，记得执行一下handleIEhasLayout，万事OK。 原文：http://realazy.org/blog/2007/04/02/ie-haslayout-rerenderin
在JavaScript编程中，特别是在处理与Internet Explorer (IE) 浏览器相关的网页样式更新时，一个常见的问题是浏览器无法正确地重新渲染已经改变的CSS样式。这种情况通常发生在涉及页面元素布局或者尺寸变化时，IE可能不会立即反映出这些变化，导致页面看起来没有更新。这主要与IE的"hasLayout"机制有关。
“hasLayout”是IE特有的一个概念，当一个元素满足特定条件时，它被认为具有“hasLayout”，并会自动进行一些渲染优化。然而，这种优化有时会导致元素的更新不被浏览器正确处理，尤其是涉及到CSS更改时。为了解决这个问题，开发者需要强制浏览器触发重新渲染，以确保最新的样式变化能够显示出来。
一种常见的解决方法是通过修改`document.body.style.zoom`属性来触发重绘。在提供的代码片段中，`handleIEhasLayout`函数实现了这个目的：
```javascript
function handleIEhasLayout() {
// 触发重新渲染
document.body.style.zoom = 1.1;
// 恢复原样
document.body.style.zoom = "";
}
```
这个函数首先将body元素的`zoom`属性设置为1.1，这会改变元素的缩放比例，从而触发浏览器的重绘。然后，函数立即恢复`zoom`属性到空字符串（或"normal"），使页面恢复到原始状态。调用这个函数后，IE应该会正确地重新渲染页面。
需要注意的是，这种方法并不总是万无一失。有报告指出，即使使用`zoom`属性，在某些情况下，如页面内容较少未充满屏幕时，仍然可能出现渲染不完全的问题。为了解决这种情况，可以尝试其他触发重绘的方法，比如：
```javascript
function reflow() {
var b = document.body;
b.style.zoom = b.style.zoom == "1" ? "100%" : "1";
}
```
或者，使用`display`属性的切换也可以达到相同的效果：
```javascript
function forceReflow() {
document.body.style.display = "none";
document.body.style.display = "";
}
```
这种方法通过暂时将元素的`display`属性设为"none"，然后立即恢复，迫使浏览器重新计算元素的布局和渲染。
总结起来，解决IE下不渲染CSS更新的bug主要是通过触发浏览器的重绘或重排操作。尽管`zoom`属性和`display`属性的切换都可以实现这一目标，但具体效果可能因页面内容和IE版本而异。在实际开发中，针对不同版本的IE可能需要采用不同的解决方案，以确保兼容性和良好的用户体验。
