Question

这是我的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的开发人员工具时出现错误：此网址中的资源不是文字：http://foo.foo/css/reset.css 。这必须是Web服务器配置问题，因为根据此link “W3C规范提到CSS文件应该以”text / css“MIME类型”和“提供“严格模式”将严格遵循规范，并期望CSS文件以正确的MIME类型“”提供。

修改运行fiddler来调试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

修改我发现了问题所在。这是错误配置的Web服务器; CSS的mime-types未声明默认为 text / plain 而不是 text / css 。

Answer 1

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

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

HTML 5没有应用我的CSS

1 个答案: