HTML5 元素在 Chrome 中有效，但在 Safari 或 Firefox 中无效？答案

【问题标题】：HTML5 elements working in Chrome but not Safari or Firefox?HTML5 元素在 Chrome 中有效，但在 Safari 或 Firefox 中无效？
【发布时间】：2010-04-07 15:10:56
【问题描述】：

我正在使用 HTML5 元素，并且在我正在处理的项目中，CSS 似乎在 Chrome 中运行良好。但是，它似乎在 Safari 或 Firefox 中不起作用（我没有测试过 IE，但我想它是一样的），并且页面布局到处都是。

任何想法为什么会这样？我知道 Firefox 和 Safari 都支持这些元素，而且 Safari 和 Chrome 一样是基于 webkit 的，所以我不知道问题出在哪里。

~~你可以看到网页here。~~ {网站链接不可用}

【问题讨论】：

我在 Chrome 4.1.249.1045 (42898) 和 Firefox 3.6.2 上看到了同样的情况，而且两者似乎都不正确（地图与标题重叠，“等等，那是什么意思？”被其他东西覆盖。

标签： css firefox html google-chrome safari

【解决方案1】：

Safari 和 Firefox 对 HTML5 分段元素具有相同级别的“支持”（在看到您的演示页面后，我猜这些是您正在谈论的元素）：它们可以设置样式，但您必须设置display: block; 隐含。

aside, article, section { display: block; }

将此规则添加到您的 CSS 将解决问题。

要使这些元素在 IE 中具有样式，您只需要使用 HTML5 shim/shiv。将以下 HTML 放入您的 <head>：

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

【讨论】：

啊，就是这样！我忘记了需要使用“display:block”来启动 CSS。如果你看一下第 20 行，我实际上正在使用 Shiv。谢谢！

【解决方案2】：

哪个部分不完全工作？ <canvas> 元素似乎可以正确呈现，您的 <article> 容器没有被忽略。

顺便说一句，我在 FF3.6.2。我看到的唯一 CSS 错误就是：CSS 错误。

【讨论】：

【解决方案3】：

我遇到了“figure”元素的问题，没有显示背景图片。所以我克服了这个问题......

background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;

这没用... 背景：rgba(0, 0, 0, 0) url("../img/login_bg.jpg") 滚动中心中心/封面；

【讨论】：