css - 解决“传奇”冲突 IE 9

Question

以下 CSS 适用于 Firefox、Chrome 和 Safari。但由于某种原因 IE 9 它没有显示legend. 其他 CSS 在 IE 9 中正确显示。我已经尝试过，但找不到答案。legend它应该显示带有白色文本和黑色边框的橙色标题。

CSS：

legend{
    color: #fff;
    background: #ffa20c;
    border: 1px solid #781351;
    width: 49.2em;
    padding: 2px 6px
}

当我通过尝试学习时，我的样式表是一团糟。我认为它可能在某个地方存在冲突。

完整的样式表可以在这里查看：

score 4 · Accepted Answer

您的问题不仅在橙色标题上，您的文档标记上有61 个错误和 15 个警告。

请参阅此链接以确切了解错误是什么，它们位于何处以及如何解决它们！

此外，您应该阅读一些关于 HTML 的内容：

Google 从头开始的 HTML、CSS 和 Javascript

资料来源： http ://w3fools.com/ （感谢Spudley）

score 1 · Accepted Answer

我会冒险猜测它不起作用，因为您试图将标题放在图例元素中。图例仅适用于表单，但这是页面/部分标题而不是表单图例。

将 <legend> 替换为 <h1> 并相应地更新您的 CSS。

您还应该习惯于编写有效的 HTML，因为无效代码也可能导致浏览器之间的不一致，因为它们试图以自己的方式理解您的代码。使用 W3C 验证器并解决错误

score 1 · Accepted Answer

在这一系列事件发生后的某个时间，整个站点重新启动。我已经存档了旧文件。如果您想查看此建议的结果，至少暂时可以查看http://www.mconchicago.com/MCON/

3 回答 3