IE 7显示隐藏和显示无元素

Question

我的页面上有一个元素,它应用了"display:none"和"visibility:hidden".然而IE 7仍然显示元素.它不仅显示元素,当我打开开发人员工具栏并检查所述元素时,它告诉它确实没有显示而且不可见.

此外,当它处于原始状态时,我无法使用开发人员工具栏中的选择器工具来选择元素,直到我手动删除"display:none"和"visibility:hidden"规则.

这就好像IE 7正确地解释了我的样式表,但渲染引擎却公然忽略了它们

这是CSS

.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }

这是标记

<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
    <div class="footer wrapper">
        <div class="corner left"></div>
        <div class="corner right"></div>
        <div class="button-wrapper" id="btnContents">
            <a title="contents" id="sb-nav-button">
                <span>Contents</span>
            </a>
        </div>
        <div class="button-wrapper" id="txtContents">
            <div id="sb-title">Lorem Ipsum </div>
        </div>
        <div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
            <a title="Next"><span>Next</span></a>
        </div>
        <div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
            <a title="Previous"><span>Previous</span></a>
        </div>
    </div>
</div>

请注意,上述规则应该适用于#btnContents,#txtContents,#btnNext和#btnPrevious,但是在IE中只隐藏了后面的3个规则.

Answer 1

http://jsfiddle.net/UugDU/

我添加了一些开始和结束文本只是为了确保结果得到渲染。

我在IE7下没有任何问题。这一定是您代码中其他地方的问题。我建议您从代码的完整版本开始，然后将其削减到产生错误所需的最低限度并发布该错误。