TL;DR
この問題に関するスタック オーバーフローに関する多くの質問を読み、与えられたアドバイスに従おうとしました。それでも、私の CSS スタイルシートは Chrome/Safari では機能しませんが、 Internet Explorer では機能します。
私のシナリオで見られる唯一の奇妙な点は、サーバーがすべてのファイルをタイプとして返すことですapplication/octet-stream。サーバーのこの側面を変更することはできません。Chrome/Safari および IE で CSS ファイルをスタイルシートとして解釈するためにできることはありますか?
私が取り組んでいる埋め込み Web サーバー プロジェクトがあります。私は、サーバー ソフトウェアの制御とページ レベルの設定を行う能力が非常に限られています。私にできることは、サーバー アプリケーションにコンパイルされる静的な HTML、CSS、および画像ファイルを作成することだけです。
そのため、組み込みサーバーから返されるすべてのファイルapplication/octet-streamはHTTPヘッダーで宣言されます。これにより、Chrome で警告が生成されますが、エラーは発生しません。
最初は、Chrome/Safari でこのスタイル シートを読み込むのに問題がありましたが、IE では動作します。Stack Overflow に関するいくつかの質問を読んだ後、スタイルシートの宣言を次のように変更する必要があることがわかりました。
<link rel="stylesheet" href="/styles/index.css">
に：
<link rel="stylesheet" type="text/css" href="/styles/index.css">
この変更を行ったとき、Chrome と Safari はまだ CSS ファイルの処理に失敗しましたが、IE もスタイルシートを無視し始めました。
奇妙なことに、HTML ドキュメントで を宣言しないDOCTYPEと、リンクされたスタイルシートをすべてのブラウザで動作させることができます。ただし、これは望ましい解決策ではありません。
私の推測では、この問題はヘッダー宣言と関係があり、要素HTTPで宣言された型と一致していません。link
このスタイルシートを Chrome、Safari、および IE で動作させるにはどうすればよいでしょうか (つまり、HTML ファイルで doctype を使用し、HTML ヘッダーにスタイル コードを埋め込まないなど)、適切な Web 開発コードに従います。
わかりやすくするために、関連する CSS/HTML コードを以下に示します。
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
参考までに、これは既存のプロジェクトから開発されている新しいプロジェクトです。元のプロジェクトではDOCTYPE、HTML ファイルで を宣言していませんでした。そのため、すべてのページ データはブラウザに読み込まれ、quirks モードで実行されました。さらに、 はindex.htmもともとframes内の複数で構成されていましたframeset。
Web ページを開発するための正しい最新の方法を使用して、このアプリケーションを更新しようとしています。このアプリケーションを動作させることはできますが、ブラウザーの癖モードとフレームセットに依存しなければならない場合、将来のブラウザーの互換性が犠牲になると感じています。
リンク タグを閉じようとしましたが、解決しません。このドキュメントは XHTML ではなく HTML5 ドキュメントとして宣言されているため、技術的にはこれは問題になりません。