样式显示:没有在IE8、IE9、IE10兼容性视图中不起作用

Style display:none not working in IE8, IE9, IE10 Compatibility View

本文关键字：IE10 IE9 兼容性 视图 不起作用 IE8 显示 样式      更新时间：2023-09-26

我的页面上有两个div。根据某些条件，其中一个设置为显示：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;"/>

您忘记为两个div放置</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;"></div>

查看演示，它在所有浏览器中都能正常工作。

<div>不是一个自关闭标签。不能通过在末尾将该标记写为<div .... />来结束该标记。它们是容器标记，并且它们应该包含一些元素以便display: none工作。

例如：

<div style="display: none;">
     What ever inside will never show
</div>

进行这些更改，它将按您的意愿运行。

如果你想隐藏两个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>

使用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>
相关文章：