Question

例如

下面有一个div，html代码

<div id="testDiv"></div>

但是当我在ie上设置div(id=testDiv)的innerHTML属性时，请参阅下面的代码：

document.getElementById('testDiv').innerHTML= '';

并且div将具有高度和宽度，而不是空白div 那就是为什么？如果我想在设置innerHTML =''（如果不设置display：none）时div是空白div，我该怎么办？
现在显示测试代码（在 ie7 和chrome上运行的不同结果）

<!DOCTYPE>
<html>
<head>
<style>
        #bl{background:red;}
</style>
<script type="text/javascript">
function f(a){
    var t=document.getElementById("bl");
    t.innerHTML=a;
}
</script>
</head>
<body>
    <button type="button"  onclick="f('')">test</button>
    <div id="bl"></div>
</body>
</html>

Answer 1

在您的函数中，检查文本是否为''，如果是，请从div中删除子节点。而不是设定它的价值。

if (a=='') t.removeChild(t.childNodes[0]);
else t.innerHTML=a;

在IE8和IE8的兼容模式下检查（所以它也应该在IE7中工作）。

为了获得更高的稳定性，您可以删除t中的所有子节点，如此...

if (a=='') {while (t.hasChildNodes() t.removeChild(t.childNodes[0]);}
else t.innerHTML=a;

Answer 2

我认为这是一种已知的IE行为。除了将innerHTML设置为空字符串之外，您还可以将font-size设置为0。

空白div，但不是空白

2 个答案: