CSSがすべてのブラウザで同じように適用されないのはなぜですか?たとえば、次のコードの場合:
<body align="center" background="F:\photos\sravan\wi7.jpg">
Chromeでは中央と背景に揃えられたテキストを見ることができますが、Mozillaでは同じではありません!なぜこうなった?
CSSがすべてのブラウザで同じように適用されないのはなぜですか?たとえば、次のコードの場合:
<body align="center" background="F:\photos\sravan\wi7.jpg">
Chromeでは中央と背景に揃えられたテキストを見ることができますが、Mozillaでは同じではありません!なぜこうなった?
ブラウザーfile://
は、セキュリティ上の理由からリソースへのアクセスを制限します。私の知る限り、同じディレクトリでのみ画像の場所を指定できます。つまり、HTMLファイルもf:/photos
相対パスを使用して参照する必要があります。sravan/wi7.jpg
.
また、コメントで指摘されているように、使用している表記は CSS ではありません。HTML 属性を使用してビジュアル プロパティを指定することは時代遅れの手法であり、実際の CSS に切り替えることをお勧めします。その基本については、たとえばここまたは Robert が推奨するサイトのいずれかで学んでください。
代わりに、次のように HTML と CSS を使用する必要があります。
<body>
content
...
</body>
および本体CSS
body {
background-image: url(URL to your image and not local path);
text-align: center;
}
悪気はありませんが、妥当なコードを書き始める前に、HTML と CSS を学ぶことを強くお勧めします。
W3C 仕様 に従って、body
要素はalign
属性をサポートしておらずbackground
、4.01 で廃止され、HTML5 ではサポートされていません。したがって、属性として使用しないでください。CSS を使用してスタイルを定義します。
style
内に要素を追加するhead
(非推奨)要素にインラインでスタイルを追加します。
<body style="text-align: center; background-image: url(wi7.jpg);">
多くのインライン スタイルを持つ CSS の動作方法により、アプリケーションの保守が難しくなり、ページを期待どおりにレンダリングするために使用しなければならない新しい CSS ハックが導入されます。懸念事項の分離ルール。HTML ファイルはコンテンツ定義であり、CSS ファイルはそのスタイルです。可能な限り別々に保管してください。
ブラウザは仕様に従おうとするため、HTML+CSS のレンダリングには違いがある場合があります。それについて非常に厳格な人もいれば、もう少し緩い人もいます。仕様内にとどまるようにしてください。そうすれば、クロスブラウザーでより良い結果が得られるはずです。