【问题标题】:Resolving 'Legend' conflict IE 9解决“传奇”冲突 IE 9
【发布时间】:2013-07-10 04:02:24
【问题描述】:

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

网站地址:http://www.mconchicago.com

CSS:

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

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

完整样式表可以查看here:

【问题讨论】:

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

标签: css internet-explorer cross-browser


【解决方案1】:

您的问题不仅出现在橙色标题上,您的文档标记上还有 61 个错误和 15 个警告

请参阅this link 以准确了解错误是什么、它们位于何处以及如何解决它们!


另外,您应该阅读一些有关 HTML 的内容:

Google's HTML, CSS, and Javascript from the Ground Up

Opera Web Standards Curriculum

SitePoint

The MDN (Mozilla's Developer Network)

W3.org HTML element reference

来源:http://w3fools.com/(感谢Spudley

【讨论】:

  • 感谢您的参考。第一个链接看起来像一个真正的节省时间
  • 该链接是由this site!生成的,只需将完整的URL放入您需要验证的页面即可!
  • +1 用于链接到 W3C 验证器,但 -1 用于链接到 w3Schools。你会在那里学到很多东西,但并不是所有的都是正确的。
  • @Spudley,有您喜欢或推荐的网站吗?我可以用更可靠的链接更新我的答案!
  • @Zuul - 我把你推荐给w3fools.com,这基本上是对 w3Schools 的大肆抨击。但是,它确实包含一个更好的替代资源列表(向下滚动一两页)。
【解决方案2】:

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

替换为

并相应地更新您的 CSS。

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

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mconchicago.com%2F

【讨论】:

  • 非常感谢关于 h1 的提示。这足以初步解决问题。也感谢验证器链接。我意识到代码需要清理,这会有所帮助。
【解决方案3】:

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

【讨论】:

    猜你喜欢
    • 2017-09-10
    • 1970-01-01
    • 1970-01-01
    • 2012-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-16
    相关资源
    最近更新 更多