css - 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

尝试应用溢出:隐藏；在 ModalTypeTwo 上。我在 IE7 中遇到了类似的问题，隐藏父项的溢出修复了它。