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 の開発者ツールを使用すると、エラーがあります: The resource from this URL is not text: http://foo.foo/css/reset.css。このリンクによると、 「W3C 仕様では、CSS ファイルは "text/css" MIME タイプで提供されるべきであると言及されており、"厳密モード" では仕様に厳密に従い、CSS ファイルを期待するため、これは Web サーバーの構成の問題である必要があります。正しい 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

編集： 問題が何であるかがわかりました。Web サーバーの構成が間違っていました。CSS の MIME タイプが宣言されておらず、デフォルトでtext/cssではなくtext/plainに設定されていました。

4

1 に答える 1

3

相対パスが間違っている可能性があります。Chrome または Safari を使用している場合は、ページの任意の場所を右クリックし、 [検査] を選択します。ソースで CSS ファイルをロードする行を見つけてクリックし、CSS ファイルが正しくロードされるかどうかを確認します。

または、開発者ツールで [ネットワーク] タブを選択し、ページを更新します。text/css404 ステータス コードを返すタイプの HTTP リクエストを探します。

于 2013-10-04T03:09:55.647 に答える