HTML5 不允许链接外部样式表？ [关闭]答案

【问题标题】：HTML5 Doesn't allow linking external stylesheets? [closed]HTML5 不允许链接外部样式表？ [关闭]
【发布时间】：2014-03-20 05:51:57
【问题描述】：

我在使用 <link rel="stylesheet" href="styles.css"> 时遇到问题在我的网页上。它在头部标签中。一旦我删除了 HTML5 doctype 声明，它就可以正常工作，没有其他更改......关于为什么 HTML5 会阻止浏览器使用外部样式表的任何想法？

【问题讨论】：

标签： css html

【解决方案1】：

首先，确保您在 HTML5 文档所在的目录中确实有一个 styles.css 文件。其次，试试这个代码，而不是：<link href="styles.css" rel="stylesheet" type="text/css">。

【讨论】：

Is type=“text/css” necessary in a <link> tag? 和 Do we need type=“text/css” for <link> in HTML5 上的答案说type="text/css" 是完全可选的。你有一个理论为什么在这种情况下可能需要它？
@Philipp HTML5不需要它，但如果OP的代码回退到HTML4.01（确实需要它）或者OP想要使用类型“ico”而不是“css”稍后在文档中，这有助于保持一致性。
@Philipp 此外，未来可能会在规范中添加更多类型，在这种情况下，最好先定义您想要的类型。
OP 说它加载的文档类型已被删除，因此文件就在那里。类型是可选的。 -1

【解决方案2】：

很可能这与样式表在外部无关，而与通过style 元素嵌入到HTML 中相反。相反，样式表本身的某些部分仅在 quirks mode 中“工作”，而 <!doctype html> 阻止了怪癖模式。

例如，类似width: 600 的声明会被符合标准的浏览器和 CSS 规则忽略。在 quirks 模式下，浏览器故意打破规则，将600 解释为600px，这通常是作者的意思。

结论主要取决于页面的状态。如果是老页面，可能有很多种quirks需要quirks模式；那么就不要添加<!doctype html>。如果它是一个新页面，或者是一个完全重写的页面，请摆脱怪癖：确保您的 HTML、CSS 和 JavaScript 代码符合规范。

【讨论】：

就是这样，它是一个全新的页面 (HTML5)，CSS 验证为 CSS3，没有错误。使用 doctype 声明，在 <style> 标签中嵌入 css 是可行的（它实际上是完全相同的文件，我只是将它包含在 PHP 中，即 <style><? include("styles.css"); ?></style>）并且效果很好。但是当我使用<link> 时，不会呈现任何样式。没有文档类型，它可以双向工作。我还确保所有引用的 url 都是绝对的，以避免任何可能的混淆。
那么你需要提供一个实际演示问题的可测试案例（就像你最初应该做的那样）。

【解决方案3】：

这个标记很好：

<link rel="stylesheet" href="styles.css">

type=text/css 不是必需的，它仅供用户代理使用。

问题一定出在您的浏览器上 - 使用不同的浏览器清除 cookie/缓存 /test。

（您可以查看此演示：<link> tag, 2 examples + interpretation - 逐步删除每个属性以突出显示在浏览器中的影响（如果有）

【讨论】：