IE7:元素即使显示:none也显示

Question

我试图在首次显示页面时隐藏"必需"消息.在FF和IE8上这是有效的,但由于某种原因,消息显示在IE7上.

这是HTML:

    <div id="passwordDivRequired" class="requiredMsg">
        <img src="images/required.png" />
                            Required                        
    </div>

这是CSS:

.requiredMsg img{
    width: 1.5em;
    height: 1.5em;
    position: relative;
    bottom: -.4em;
}

div .requiredMsg {
    color: #BF5754;
    display: none;
}

Answer 1

div .requiredMsg

选择具有class属性的任何元素,该属性包含作为div元素后代的词requiredMsg.

- http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

摆脱后代选择器(空间).

Answer 2

David Dorward无可否认地对这个特定问题有了正确的答案,但是为了记录的完整性,当隐藏在其他浏览器中时,有两个(至少)其他IE <= 7个特定原因要显示元素:

1)这里有一个完美的描述:http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm为了给出基本的要点,如果你的元素在页面加载后隐藏在一个动态隐藏的容器中,就会发生这种情况.然后显示.该页面上有更多信息,一个很棒的演示和一些修复.

2)另一个更罕见但可能与IE7相关的故障:'显示:阻止'(由CSS设置)元素显示尽管在'显示:无'(由javascript设置)'div'元素内,而其他子元素没有'显示'被设置不显示预期.在这种情况下,容器是一个'Position:fixed'div(也是由JS设置),而子是一个锚('a').对我来说,唯一能修复它的是重构我的应用程序逻辑,以便在页面加载之前在CSS中应用'Display:None',而不是在Javascript之后.即使在稍后使用javascript切换显示时,这仍然有效.

通常,在页面加载后隐藏内容时,IE <= 7似乎在显示继承方面存在令人困惑的问题.

(随意编辑)