IE8不能识别HTML5（即使使用shiv）

Question

IE8不能识别HTML5（即使使用shiv）

csshtmlinternet-explorerinternet-explorer-8html5shiv

6

我完全被一个非常奇怪的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行时停止工作。

有人知道为什么会发生这种情况吗？任何帮助都会很棒。

非常感谢！

- Tom Maitland

1

您的网站在其他无效的HTML中存在重复的id。 - Sparky

你修复了无效的代码，但是在重新测试时，你确定清空了IE浏览器缓存吗？另外，你使用的是真正的IE 8版本，还是某种测试模式等？ - Sparky

4个回答

3

我有一个解决方案，将您的内联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]-->

- unclejam

0

如果您在确保HTML有效性后仍然遇到SVG删除问题，请在页面顶部应用以下代码来替换标准的<html>。

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

这将在IE版本小于9的整个页面上应用“lt-ie9”类。任何版本，包括9或更高版本，都将显示没有类的正常<html>。

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

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

*免责声明：我已经有一段时间没有在IE8上尝试过这个方法了。如果您将SVG包装在div.lt-ie9中并将其应用于父元素，则可能仅适用于此浏览器 - 我不记得会抛出什么错误。我想测试一下，但我正在使用Ubuntu，这台机器上没有虚拟机。

注意：在父元素（<html>或<body>）中使用条件IE注释的方法很常见，有很多变体。您应该在这个领域进行一些研究，并使用比这里提供的更普遍的情况。这将为您带来更广泛的技术优势，同时也解决了这个特定问题。

- Darren L

0

浏览器绝对讨厌无效的HTML。

您的无效HTML包含重复的id。具体来说，在<header>和<footer>中都使用了#site。一些浏览器只会采用第一个出现并忽略其余的。

第440行，第18列：ID“site”重复。 <footer id="site">

第97行，第19列：ID“site”的第一次出现在此处。 <header id="site">

- Sparky

谢谢！我已经交换了<footer> ID，所以问题不在那里，但似乎并没有解决它。除了图像没有ALT标签之外，似乎没有其他严重的验证问题，这肯定不会导致这种情况吧？ - Tom Maitland

@TomMaitland：不，我不认为这些小问题与此有任何关系。然而，我从不冒险使用IE，并始终努力实现100％完美的HTML验证。 - Sparky

刚刚将网站改为100%有效的HTML5，看看是否有所帮助，但似乎并没有。我已经清空了浏览器缓存，并在IE9上进行了测试，但是以IE8模式运行。 - Tom Maitland

@TomMaitland：老实说，我不知道，但我知道在IE 9中以IE 8模式进行测试并不是你想象的那样。它被称为“兼容性模式”，因为它旨在查看可能无法在IE 9中正确呈现的旧网站。然而，微软确实提供了这些免费的硬盘映像，专门用于网站测试。 - Sparky

1

结果证明是一个SVG阻塞了一切，原因不明。当我将其移除后问题得到解决。非常感谢。这也是关于硬盘映像的一个非常有用的提示。 - Tom Maitland

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom Maitland · Accepted Answer

刚刚弄明白了，感谢@Sparky672指引我正确的方向。

对于其他遇到这个问题的人来说，彩色碎片下面的曲线是使用SVG创建的。我原本以为如果IE不能渲染SVG，它会忽略它，但似乎它会搞砸它下面的所有东西。

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