logo标签列表

在IE7中"display:none"不起作用

javascriptxhtmlinternet-explorer-7
3

情况：- 我创建了一个单选按钮组。当用户选择一个单选按钮时，根据他的选择内容会被显示，并且其他内容会被删除。

问题：- 在除IE7之外的所有浏览器中页面都可以正常工作。我需要一个在IE7中也能运行的解决方案。

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE7 Bug display:none</title>
    <style>
        #entireContent, #div1, #div2{
            display:block;
        }
    </style>
    <script type="text/javascript">
        function displayDiv1(){
            document.getElementById('div1').setAttribute('style','display:&quot');
            document.getElementById('div2').setAttribute('style','display:none');

        }
        function displayDiv2(){
            document.getElementById('div1').setAttribute('style','display:none');
            document.getElementById('div2').setAttribute('style','display:&quot');  
        }
    </script>
</head>
<body>
    <div id="entireContent">
        <input type="radio" name="group" value="t1" onclick="displayDiv1()">TEST 1<br>
        <input type="radio" name="group" value="t2" onclick="displayDiv2()">TEST 2<br>
        <div id="div1">TEST 1</div>
        <div id="div2">TEST 2</div>
    </div>
</body>
</html>

参考资源： http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

我尝试了这个资源提供的方法，但是没有成功。

请帮我解决这个问题。谢谢您提前的帮助。

"display:&quot" 显然不正确。结束引号在哪里？ - leppie
"display:&quot"类似于"display:''"。其目的是从元素的样式中删除"display"属性。 - vedvrat13
4个回答
5
你可以尝试这个方法代替：
显示内容：
document.getElementById('element_id').style.display = 'block';

隐藏：

document.getElementById('element_id').style.display = 'none';

那应该可以正常工作。

4

虽然我赞同你应该使用.style.display来访问属性，但我想提醒一下正确修改元素属性的方式。

document.getElementById('div2').setAttribute('style','display:&quot');

这个方法无法模拟 .style.display=''，因为这不是属性（css）的正确语法，即使这部分正确，由于只有一个引号，所以你会将显示属性设置为整个文档的剩余部分。
取消属性的正确方式是使用removeAttribute函数，像这样：

document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').removeAttribute('style');
0

尝试使用

document.GetElementById('div1').style.display = "block";
document.GetElemebtById('div2').style.display = "none";
0

我试过这个：getElementById("id").style.display = none，在Chrome浏览器中可以正常工作，但在IE 11浏览器中出现问题。

我做了以下修改，然后两个浏览器都可以正常工作： getElementById("id").style.display = "";

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接