IE 7显示隐藏和display:none元素

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个被隐藏。

- Adam Ritenauer

---

请复制这段内容，并将其链接到jsfiddle上。谢谢。 - meder omuraliev

如果需要在jsfiddle中进行复制，请添加+，但是仅发布相关的CSS和HTML也会很有帮助。 - prodigitalson

还有其他可能影响这个的CSS吗？我猜你的CSS不止一行。 - Ryan Kinal

我已经更新了原帖并添加了代码。疑问的元素是 #btnContents。请注意，根据IE 7开发者工具栏，上述CSS规则正在应用于该元素。当前样式窗口显示元素为“display：none;”和“visibility：hidden;”，但该元素仍然可见且交互式（它具有一些附加到单击事件的javascript）。 - Adam Ritenauer

Answer 1

尝试在ModalTypeTwo上应用overflow: hidden;。我在IE7中遇到了类似的问题，隐藏父元素的溢出部分解决了它。

- designerdre101

---

我知道这是2年前发布的，但感谢您，这确实帮了我很大的忙。 - user1318194

Answer 2

http://jsfiddle.net/UugDU/

我添加了一些起始和结束文本，只是为了确保结果被呈现出来。

在IE7中，我没有任何问题。这一定是你代码中的其他地方出了问题。我建议你从完整版本的代码开始，逐渐缩减到最小限度以产生错误并发布。

- jackocnr

Answer 3

如果这篇文章能帮助到未来遇到同样问题的谷歌用户，问题出在Internet Explorer 4-7版本对CSS中"visibility:hidden"的解释上。这些老旧的浏览器会隐藏它们的直接内容，但不会隐藏它们HTML子元素的内容。此外，IE5还有一个奇怪的“反向”bug，即在隐藏父元素下添加"visibility:visible"到一个直接内容元素时，它将不可见。这是我对该问题的了解，可能还有我忽略的更微妙的细节。

一般来说，如果你在IE7浏览器中进行测试，请尽量避免使用"visibility"来显示和隐藏内容。如果你必须在这些老旧的浏览器中隐藏某些内容，只需使用"display:none"将它们完全删除，这在这些老旧的浏览器中几乎总是可靠的。或者，如果它们必须在页面中对IE7用户可用，只需使用下面所示的CSS将它们快速移出页面。注意：这不会影响您的页面设计或布局。

position: absolute !important;
top: -9999px !important;
left: -9999px !important;

- Stokely