javascript 样式显示：none 在 IE8、IE9、IE10 兼容性视图中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17462209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style display:none not working in IE8, IE9, IE10 Compatibility View
提问by Sukhminder Singh
I have two DIVs on my page. One of them is set to display:nonebased on some condition. It works well on IE10, Firefox and Chrome. But it does not work on IE8, IE9 and IE10 Compatibility View. As a result, it shows both of the DIVs. Can someone suggest what to do to fix this issue?
我的页面上有两个 DIV。其中之一设置为display:none基于某些条件。它在 IE10、Firefox 和 Chrome 上运行良好。但它不适用于 IE8、IE9 和 IE10 兼容性视图。结果，它显示了两个 DIV。有人可以建议如何解决这个问题吗？
<div id="dv1" style="background: url(http://abc.com/images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(http://abc.com/images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"/>
回答by Chankey Pathak
You forgot to put </div>for both divs.
你忘了把</div>两个div。
I think you want something like below.
我想你想要像下面这样的东西。
<div id="dv1" style="background: url(http://abc.com/images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(http://abc.com/images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"></div>
Check the demo, it works fine in all browsers.
检查演示，它在所有浏览器中都可以正常工作。
回答by Starx
<div>is not a self closing tag. You cannot end this tag by writing it as <div .... />at the end. They are container tag and they should contain some elementfor display: noneto work.
<div>是不是自闭的标签。你不能把它写成结尾来结束这个标签<div .... />。他们是容器标签，它们应该包含一些元素的display: none工作。
For example:
例如：
<div style="display: none;">
What ever inside will never show
</div>
Make these changes and it will work as you want.
进行这些更改，它就会如您所愿。
回答by yeyene
If you want to hide both DIVs, your html markup should be like that, div2must be inside div1
如果你想隐藏两个 DIV，你的 html 标记应该是这样的，div2必须在里面div1
<div id="dv1" style="background: url(http://abc.com/images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;">
<!-- div1 content -->
<div id="dv2" style="background:url(http://abc.com/images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;">
<!-- div2 content -->
</div>
</div>
回答by Seth McClaine
Use CSS instead of inline styling
使用 CSS 而不是内联样式
<html>
<head>
<style>
.dv1 {
background: url(http://abc.com/images/green.gif) no-repeat scroll 0px 0px transparent;
height: 26px;
width: 171px;
display: none;
}
.dv2 {
background:url(http://abc.com/images/red.gif) no-repeat scroll 0 0 transparent;
height:26px;
width:142px;
padding-left:18px;
padding-right:11px;
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>
