6

I'm completely stuck on a really weird IE bug and non of the other posts about this issue seem to solve it. IE 8 isn't applying CSS styles to HTML5 tags on a site I've just launched. In the past I've always fixed this with a shiv and/or code like:

<!--[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]-->

The website is http://www.unyouth.org.au/.

IE8 seems to recognise the header but as soon as it gets to the row of ASIDEs stops working.

Does anyone have any ideas why this is happening? Any help would be amazing.

Thanks so much!

4

4 回答 4

5

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

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

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

于 2012-12-13T00:46:00.367 回答
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]-->
于 2014-01-27T06:04:04.103 回答
0

Explorer absolutely hates invalid HTML.

Your invalid HTML contains duplicate id's. Specifically, #site is used in both <header> and <footer>. Some browsers just take the first occurrence and ignore the rest.

Line 440, Column 18: Duplicate ID site. <footer id="site">

Line 97, Column 19: The first occurrence of ID site was here. <header id="site">

于 2012-12-13T00:13:41.327 回答
0

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

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

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

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

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

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

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

于 2016-01-16T08:58:17.323 回答