Question

我的页面上有两个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;"/>

Answer 1

您忘记为两个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>

检查demo，它适用于所有浏览器。

Answer 2

<div> 不是自我结束标记。您不能通过在结尾处将其标记为<div .... />来结束此标记。它们是容器标记，应包含<{1}}的某些元素。

例如：

display: none

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

Answer 3

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

Answer 4

使用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>

样式显示：无法在IE8，IE9，IE10兼容性视图中工作

4 个答案: