2

这是我的 HTML

<!doctype html>

<html lang="en" id="home">
<head>
    <meta charset="utf-8">
    <title>Me</title>       
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />  
</head>
<body style>  
    <div class="centered">
        <img alt="Me" id="Me" src="cache/me.jpg" /> 
    </div>
</body>
</html>

这是style.css

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -200px;
}

#Me { 
    display: block;
    margin: 0 auto; 
    width: 400px;
    height: 600px;
}

如果我将 style.css 文件的内容放入 HTML 内的样式标记中，它将很好地应用样式表。如果我删除，<!doctype html>那么它会呈现页面就好了。我已经使用它通过的 W3C 验证器验证了 HTML。

编辑： 我已将站点中的所有文件复制到本地驱动器并在 Chrome 中打开 index.html。它渲染得很好，但它仍然没有解释为什么<!doctype html>还要删除它的修复程序。

编辑： 使用 firefox 的开发人员工具，出现错误：来自此 URL 的资源不是文本： http: //foo.foo/css/reset.css。这一定是 Web 服务器配置问题，因为根据此链接 “W3C 规范提到 CSS 文件应该以“text/css”MIME 类型提供服务”并且“在“严格模式”下将密切遵循规范并期望 CSS 文件以正确的 MIME 类型提供服务”。

编辑： 运行提琴手调试 HTTP 连接。CSS 文件作为“application/octet-stream”发送。这是 HTTP 标头：

HTTP/1.1 200 OK
Content-Type: application/octet-stream
ETag: "3420655293"
Last-Modified: Fri, 04 Oct 2013 13:26:57 GMT
Content-Length: 765
Date: Fri, 04 Oct 2013 13:54:49 GMT
Server: lighttpd/1.4.33

编辑： 我发现了问题所在。它是错误配置的网络服务器；CSS 的 mime-types 未声明它默认为text/plain而不是text/css。

4

1 回答 1

3

您的相对路径可能是错误的。如果您使用的是 Chrome 或 Safari，请右键单击页面上的任意位置并选择Inspect。在源代码中找到加载 CSS 文件的行并单击它以查看 CSS 文件是否正确加载。

或者，在开发人员工具中选择网络选项卡并刷新页面。查找任何类型text/css返回 404 状态代码的 HTTP 请求。

于 2013-10-04T03:09:55.647 回答