ホームページ ウェブフロントエンド CSSチュートリアル Q: Quirks モードのブラウザで CSS 属性にユニットがない場合はどうなりますか?

Q: Quirks モードのブラウザで CSS 属性にユニットがない場合はどうなりますか?

Oct 24, 2024 am 09:32 AM

Q: What Happens When CSS Attributes Lack Units in Quirks Mode Browsers?

単位のない CSS 属性: PX へのフォールバック

CSS では、属性値から単位を省略すると便利に思えるかもしれません。ただし、これを行うと、予期しないフォールバック シナリオが発生する可能性があります。 quirks モードでは、単位のない属性に遭遇したときにブラウザが一貫性のない動作をする可能性があります。この記事では、フォールバックの動作、その影響、ブラウザ間での不一致について検証します。

PX へのフォールバック

CSS 属性に「px」などの単位がない場合、 「em」または「%」ブラウザでは、デフォルトでフォールバック ユニットが使用される場合があります。 Quirks モードでは、多くのブラウザーがフォールバック単位として「px」を選択します。この動作は、ピクセル長を単位のない値として受け入れる従来の HTML 属性と一致しています。

ただし、この動作はブラウザ間で一貫していません。標準モードの Internet Explorer 7 以降などの一部のブラウザは、単位のないルール属性を無視しますが、Chrome、Firefox、Safari などの他のブラウザは引き続き「px」にフォールバックします。

W3C 仕様

CSS の W3C 仕様では、ゼロ以外の長さの値には単位が必要であると規定されています。したがって、単位のない属性は無効です。この仕様は、標準モードのレンダリングに適用されます。 quirks モードでは、ブラウザーはより自由に奇妙な動作を実装できるため、フォールバック動作の変動を説明できます。

必須のフォールバック ルール

を義務付ける特定のルールはありません。ブラウザは優先ユニットにフォールバックします。この決定はブラウザーの裁量に任されており、ブラウザーのバージョン、レンダリング モード、関連する特定のプロパティによって異なる場合があります。

動作例

インターネットExplorer は、quirks モードと標準モードで動作が異なります。 Quirks モードでは、width と border-width を「px」にフォールバックしていました。ただし、標準モードでは、単位のない属性ルールは無視されます。

Firefox は、quirks モードでは Internet Explorer とは異なります。幅を「px」に戻しますが、border-width 属性は無視されます。 Chrome、Opera、Safari はすべて、quirks モードで width と border-width の両方を「px」にフォールバックします。

結論

CSS で単位のない属性を使用することはお勧めできません。特に Quirk モードでは、予期しない結果やブラウザの不整合が発生する可能性があります。すべての長さの値の単位を指定するという W3C 推奨に従うことで、ブラウザー間で一貫したレンダリングが保証されます。

以上がQ: Quirks モードのブラウザで CSS 属性にユニットがない場合はどうなりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

WordPressブロックと要素にボックスシャドウを追加します

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

満足している属性を持つインラインテキストエディターを作成します

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

GraphQLキャッシングの使用

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

最初のカスタムSvelteトランジションを作成します

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

node.jsとexpressのMulterを使用してファイルアップロードします

See all articles