上のスクリーンショットでは、Google Chrome の (要素/ウェブ) インスペクター ツールは、メニュー項目のサイズが 547 x 308 ピクセルであることを示しています。
さて、すべての最新のブラウザ (IE9 以降、Chrome、Opera、Firefox) も同じ寸法でメニュー項目を認識できると確信できますか? そうでない場合、それはどのように異なりますか？(例: フォントレンダリング?)
編集: CSS リセット スタイルシートを使用していますか。より具体的には、非常に人気のあるNormalize.cssを使用します。
あなたは確信が持てません。その理由は、ブラウザーにはユーザー エージェント スタイルシートと呼ばれるものがあるからです。これらは、ブラウザが設定できるデフォルトのスタイルです。p例として、Chrome のユーザー エージェント スタイルシートは、タグの上マージンと下マージンを定義します。
同じものを確実に表示するには、ユーザー エージェント スタイルシートを上書きする必要があります。これを行う最善の方法は、CSS リセット スタイルシートと呼ばれるものを使用することです。これは、ブラウザーが定義したプロパティを削除しようとします。
ユーザー エージェントのスタイルシートについては、こちらですべて読むことができます。そして、ここにいくつかの CSS リセット スタイルシートがあります。
指定しない限りwidth: 547px; height: 308px、いいえ。子孫要素のサイズに基づいて要素を縮小および拡大できるようにしている場合 (および子孫の寸法が固定の幅または高さによって制限されていない場合)、それは異なります。
ユーザーがフォント サイズに関してブラウザーをどのように構成したかを確認することはできません (読みやすいように大きいフォント サイズを好むユーザーもいます)。ユーザーが指定された font-family を持っていることを確認することさえできず、デフォルトの font-face には、予想よりも広いまたは狭いグリフが含まれている可能性があります。