【问题标题】:Header disappears and lists become unstyled in IE 8 and below在 IE 8 及更低版本中,标题消失并且列表没有样式
【发布时间】:2013-04-29 21:25:59
【问题描述】:

我注意到在 IE 8 及更低版本中,我的标题消失了,我的列表变得没有样式。

意思是,它们看起来与应有的不同,并且有子弹。

为什么会发生这种情况,我该如何解决。

我知道我还没有包含 html5 shim / html5 shiv,这会导致标题消失吗?我的<main> 元素和列表样式呢?

这是发生这种情况的页面的链接:https://dl.dropboxusercontent.com/u/270523/help/search/new.html

这是它在 IE8 中的样子:http://pageaffairs.com/sp/so-16270338.png

【问题讨论】:

    标签: html css


    【解决方案1】:

    正如this question's accepted answer 中所指出的,IE8 不能很好地处理 HTML5 元素。它不仅没有设计这些元素的样式,而且有时(如您所见)使它们似乎完全消失了。我在我的团队开发的网站上亲眼目睹了这一点。 IE8 将我们使用的所有<section> 标签转换为<section />,这只是弄乱了我们所有的内容和样式。您将需要使用HTML5 shiv script 使其工作(Modernizr 为我们修复了它,HTML5 shiv 脚本只是其中的一部分,但您可能至少只需要 shiv 脚本)。

    【讨论】:

    • html5 元素内的列表呢?这是一个应该支持的旧元素,但在 IE8 中的样式不同...
    • @IrfanMir 问题在于它存在于 HTML5 元素中。如果您将 HTML5 元素更改为受支持的元素(如div),它应该在没有 shiv 脚本的情况下正确呈现,或者完全删除包含元素/将列表移出元素(并更改样式规则以匹配,当然)。
    【解决方案2】:

    较旧的 IE 不会呈现 HTML5 标记,因此应用到它们的样式将被忽略。 (它们甚至不会渲染为像“哦,好吧,让我们假装它是一个 div”这样的块。不,它完全被忽略了)。

    是的,正如您所说,最好将html5shiv 添加到代码的标题中,如下所示:

    <!--[if lt IE 9]>
    <script src="path/to/your/shiv.js"></script>
    <![endif]-->
    

    这意味着if lower than IE 9,应用这个脚本。

    此外,CSS3 的东西也会发生同样的情况,比如border-radius 和其他东西。为此,请使用CSS3Pie,这很方便。

    .someRoundCorner {
        border-radius:4px;
        behavior:url(path/to/css3pie/htc);
    }
    

    作为建议,如果您的主要受众使用 IE id 的 div 等于您实际想要的 HTML5 标记。比使用 .js 更好(如果 .js 被禁用,布局会像现在一样中断)。当旧的 IE 不再受支持时,将更容易搜索和替换 id 等于您想要的标签的文档。

    更新: 您的 css 是 main ul, [role="main"] ul, #main ul,但由于 IE 不知道标签 main 是什么,它会将 UL 抛出,因此您的 CSS 选择器不匹配。在这张图片中看到所有他不知道的元素,他都变成了一个空元素:

    左边是它实际渲染的代码,而右边是真正的源代码。如您所见,UL 已超出main

    【讨论】:

    • html5 元素内的列表呢?这是一个应该支持的旧元素,但在 IE8 中的样式不同...
    • @IrfanMir 您的 css 是 main ul, [role="main"] ul, #main ul,但由于 IE 不知道标签 main 是什么,它会将 UL 抛出。在这张图片中看到所有他不知道的元素,他都变成了一个空元素:img827.imageshack.us/img827/453/sourceandie8.png
    • 啊,好吧。非常感谢您的澄清。但即使是我选择了上面答案的人,谢谢。我选择了那个答案,因为即使它是在你的答案出现的同一分钟,我首先看到了他/她,他首先回答了我关于
        的问题。很抱歉我也不能选择你的。但我都赞成。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-19
    • 1970-01-01
    • 1970-01-01
    • 2014-12-16
    • 2013-02-12
    • 1970-01-01
    相关资源
    最近更新 更多