IE 不呈现 div 内容答案

【问题标题】：IE not rendering div contentsIE 不呈现 div 内容
【发布时间】：2010-04-01 16:44:09
【问题描述】：

我使用 HTML 5 编写了一个应用程序，当有人从 IE 访问时，我不想显示错误框而不是页面。当它检测到navigator.appName 为Microsoft Internet Explorer 时，它会隐藏所有内容并显示开始隐藏的错误 div。 div如下：

<div id='ieerror' style='display:none;width:500px;height:500px;border:3px solid #ff0000;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-250px;'>
    <center>
        <h1 style='font-size: 30px;'>Internet Explorer is not supported by Aud!</h1><br /><br />
        <p>Internet Explorer does not support HTML 5 and therefore this application cannot run.<br />
        Please upgrade your browser. We suggest <a href='http://www.google.com/chrome'>Google Chrome</a>!</p>
    </center>
</div>

问题是当我在IE中访问页面时，会弹出带有边框的div，但它没有内容。里面什么都没有。我去view->source看了看，代码还在，但是没有渲染。我该如何解决这个问题？

【问题讨论】：

这是 ASP .net/php 吗？如果是这样，您可以使用请求中的标头来确定浏览器，如果是 IE，则只需发送错误页面。
另外，根据下面的评论，PO 提到这个问题发生在 IE8 中。不确定这是否适用于其他版本的 IE。

标签： internet-explorer html

【解决方案1】：

如果不查看页面的整个 HTML，就很难确切知道出了什么问题（如果页面可以访问互联网，您应该发布一个 URL！），但这是我解决问题的方法：

首先，我会制作该页面的测试副本，因为跟踪此内容可能涉及大量 HTML 更改。
接下来，我将删除 display:none 并注释掉所有针对 div 的脚本，为了好玩，我还将更改 div 的 ID 以确保没有脚本接触它。如果 div 的内容突然出现，那么问题可能出在你的脚本上，而不是你的样式上。
接下来，我将删除所有样式（在 div 及其子项上），以查看问题是否出在样式或样式之外。
如果 div 的内容显示时已删除所有样式，则开始一一添加样式，直到它再次中断。这不会解决问题，但至少会指出你的罪魁祸首。
如果删除所有样式后 div 的内容仍未显示，请尝试删除页面上的其他样式。例如，注释掉您包含的 CSS 文件。这将防止明显的问题，例如，center 元素在包含的样式表中被定义为白色背景下的白色文本。或者不太明显的问题，如继承溢出或自动换行样式导致包含的内容被剪裁或隐藏。
如果这也不起作用，那么问题很可能是由该 div 的父元素引起的。由于它是绝对定位的，所以将它放在 DOM 中的位置并不重要，因此请尝试将 div 作为 body 元素的直接子元素。这将消除任何育儿问题。
如果这些都不起作用，请尝试评论我们或从您的页面中删除越来越多的内容，直到它开始起作用。既然您知道简单地将 HTML 单独放在一个页面中就可以了，那么您就知道，如果您在某个时候修剪您的页面，它就会开始工作。

不管怎样，你已经明白了基本的想法：不断删除和简化事物，直到它开始发挥作用，从最容易改变的事物开始，然后进行大手术。在某些时候，您会隔离问题并从那里找到修复程序通常很快。

【讨论】：

【解决方案2】：

IE 可能会级联“显示：无；”向下遍历该父元素的子元素。尝试修改您的 JavaScript 以同时修改这些元素的显示属性。

【讨论】：

【解决方案3】：

你的风格是 display: none？如果你把所有的样式代码都去掉，再回到IE，你看到什么文字了吗？

【讨论】：

但我在我的 javascript 中将其切换为 display:block。如果这是问题所在，它也不会显示边框。
如果我删除样式，内容仍然没有出现。
这很奇怪。是否有任何外部风格阻碍？如果在文本元素上加边框会怎样？
不，没有外部样式对其进行样式设置。另外，我尝试在 p 标签上加边框，但还是没有。
哪个版本的 IE？ Firefox 会发生什么？

【解决方案4】：

我在 IE 中尝试了这段代码，它可以正常工作，但只是在我记得放

div.style.display = "block";

在div之后。当我之前错误地放置它时，它会抛出一个（静默）错误。

【讨论】：

它不会为我抛出任何错误。我试着把它放在 div 之后，它没有任何区别。我去了 JS 控制台，我做了 document.getElementById('ieerror').style.display = "block";它没有改变任何东西。 div 的边框出现了，但里面什么都没有。

【解决方案5】：

您可以尝试使用Internet Explorer Developer Toolbar 来查看是否有任何您不想要的样式应用于您的 DIV。

【讨论】：