IE8 无法识别 HTML5（即使使用 shiv）答案

【问题标题】：IE8 Not Recognising HTML5 (even with shiv)IE8 无法识别 HTML5（即使使用 shiv）
【发布时间】：2012-11-30 19:28:37
【问题描述】：

我完全陷入了一个非常奇怪的 IE 错误，其他关于此问题的帖子似乎都没有解决它。 IE 8 没有将 CSS 样式应用于我刚刚启动的网站上的 HTML5 标签。在过去，我总是用一个 shiv 和/或代码来解决这个问题：

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
 </script>
<![endif]-->

网站是http://www.unyouth.org.au/。

IE8 似乎可以识别标题，但一旦到达 ASIDE 行就停止工作。

有人知道为什么会这样吗？任何帮助都会很棒。

非常感谢！

【问题讨论】：

您的网站在other invalid HTML 中有重复的id。
您修复了无效代码，但您是否确保在重新测试时转储您的 IE 浏览器缓存？另外，您使用的是真实版本的 IE 8，还是某种测试器、模式等？

标签： css html internet-explorer internet-explorer-8 html5shiv

【解决方案1】：

刚刚想通了，感谢@Sparky672 为我指明了正确的方向。

对于遇到此问题的其他人，彩色碎片下方的曲线是使用 SVG 创建的。我的印象是，如果 IE 不能渲染 SVG，它就会忽略它，但它似乎把它下面的所有东西都搞砸了。

我还没有弄清楚如何删除 IE 8 的 SVG，因为用 IE 条件注释掉它似乎不起作用 - 但这是另一个问题。删除它可以解决样式问题！

【讨论】：

我也遇到了这个问题，SVG 是问题所在。有没有人找到解决这个问题的方法？

【解决方案2】：

我有一个修复方法，如果注释的话，将你的内联 SVG 包装在 IE9 中。

<!--[if gte IE 9]><!-->

    <svg id="svg-source" height="0" version="1.1" 
      xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" 
      xmlns:xlink="http://www.w3.org/1999/xlink">

    </svg>

<!--<![endif]-->

【讨论】：

【解决方案3】：

Explorer 绝对讨厌无效的 HTML。

Your invalid HTML 包含重复的id。具体来说，#site 用于<header> 和<footer>。有些浏览器只取第一次出现而忽略其余的。

第 440 行，第 18 列：重复的 ID 站点。 <footer id="site">

第 97 行，第 19 列：ID 站点的第一次出现在这里。 <header id="site">

【讨论】：

谢谢！我已经交换了
ID，因此该问题不存在并且似乎没有修复它。除了没有 ALT 标签的图像之外，似乎没有任何其他严重的验证问题，这肯定不会这样做？
@TomMaitland：不，我不认为这些小问题与此有关。但是，我从不冒险使用 IE，并始终努力实现 100% 完美的 HTML 验证。
刚刚使网站 100% 有效的 HTML5 看看是否有帮助，似乎没有。我一直在转储浏览器缓存并在 IE9 上进行测试，但在 IE8 模式下。
@TomMaitland：我真的不知道，但我知道在 IE 9 中以 IE 8 模式进行测试并不是你想的那样。它被称为“兼容模式”，因为它用于查看可能无法在 IE 9 中正确呈现的旧网站。但是，Microsoft does provide these free hard drive images specifically for website testing。
原来是一个 SVG，它以某种原因阻塞了一切。当我删除它时，它会修复。非常感谢。这也是关于硬盘驱动器图像的非常有用的提示。

【解决方案4】：

要解决您的 SVG 删除问题（在确保您拥有有效的 HTML 之后）- 将以下代码应用到您的页面顶部，以替换标准的 <html>。

<!--[if lt IE 9]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->

这会将“lt-ie9”类应用于 IE 版本低于 9 版的整个页面。任何版本（9 或更高版本）都将显示没有类的普通。

此时，您已经有了一个可以在 CSS 中使用的类来删除这些浏览器的任何元素。

.lt-ie9 svg {display: none;} /* this will remove all SVG elements with the class */

*免责声明：我已经有一段时间没有在 IE8 上尝试过了。仅当您将 SVG 包装在 div.lt-ie9 中并将其应用于父级时，它可能才有效 - 我不记得抛出了什么错误。我会测试它，但我在 Ubuntu 上，这台机器上没有虚拟机。*

注意： 在父元素中使用条件 IE cmets 的方法 - 或 - 很常见，有很多变体。您应该在该领域进行一些研究，并使用比此处提供的更一般的案例。这将为您提供这项技术的更广泛的好处，并专门解决这个问题。

【讨论】：