javascript - Style display:none not working in IE8, IE9, IE10 Compatibility View - Stack Overflow

IT技术

更新时间：2025-03-1942

admin管理员组
文章数量:1516870

I have two DIVs on my page. One of them is set to display:none based 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 id="dv1" style="background: url(.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>


<div id="dv2" style="background:url(.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"/>

<div id="dv1" style="background: url(http://abc./images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>


<div id="dv2" style="background:url(http://abc./images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"/>

Share Improve this question edited Jul 4, 2013 at 5:15 asked Jul 4, 2013 at 5:03 Sukhminder Singh 1571 gold badge2 silver badges13 bronze badges

I have update the code by providing closing div tags. Please have a look. – Sukhminder Singh Commented Jul 4, 2013 at 5:09
You should learn basic HTML first. First you didn't close the div tag, and after the edit you closed it like img tag? This is not the way you close a div tag. – Chankey Pathak Commented Jul 4, 2013 at 5:10
1 divs are not self-closing, please use literal </div> instead. – Teemu Commented Jul 4, 2013 at 5:10

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

You forgot to put </div> for both divs.

I think you want something like below.

<div id="dv1" style="background: url(http://abc./images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>

<div id="dv2" style="background:url(http://abc./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.

<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 element for display: none to work.

For example:

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

Make these changes and it will work as you want.

If you want to hide both DIVs, your html markup should be like that, div2 must be inside div1

<div id="dv1" style="background: url(http://abc./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./images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;">
        <!-- div2 content -->
    </div>
</div>

Use CSS instead of inline styling

<html>
  <head>
    <style>
     .dv1 {
       background: url(http://abc./images/green.gif) no-repeat scroll 0px 0px transparent; 
       height: 26px; 
       width: 171px; 
       display: none;
     }
     .dv2 {
       background:url(http://abc./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>

本文标签：

版权声明：本文标题：javascript - Style display:none not working in IE8, IE9, IE10 Compatibility View - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://www.betaflare.com/web/1742322454a2453063.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。