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＆amp;只隐藏了后面的3个。

Answer 1

尝试应用overflow：hidden;在ModalTypeTwo上。我在IE7中遇到了类似的问题并隐藏了父进程的溢出修复它。

Answer 2

http://jsfiddle.net/UugDU/

我添加了一些开始和结束文本，以确保结果完全呈现。

我在IE7中没有问题。它必须是代码中其他地方的问题。我建议你从代码的完整版本开始，然后将其缩小到产生错误所需的最低限度并发布。

Answer 3

如果这有助于未来解决此问题的 Google 员工，问题在于 Internet Explorer 版本 4-7 如何解释 CSS 中的 "visibility:hidden"。那些较旧的浏览器会隐藏它们的直接内容，但不会隐藏它们的 HTML 子内容。此外，IE5 有一个奇怪的“反向”错误，即添加 "visibility:visible" 到隐藏父级下的直接内容元素将不可见。这是基于我对这个问题的了解，我可能会遗漏更多细微之处。

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

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

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

3 个答案: