ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異)

概要

 ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。
 多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。

  1. デフォルトのフォントが異なる
    ブラウザ毎でデフォルトのフォントが異なる場合があります。font-styleプロパティを明示的に指定すると統一できますが、font-style: normal; で指定した場合は、表示が多少異なります。
    部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。

      body {
    	margin: 0;
    	padding: 0;
    	font-style: normal;
      }			

  2. テキストの太さが異なる
    見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。

  3. チェックボックスのデザインが異なる
    チェックボックスの表示がブラウザ間で異なる場合があります。
    チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。
    統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。

    注意:2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットするappearanceプロパティが使用できない不具合があります。

  4. プルダウンメニューのデザインが異なる
    プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。

ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。

  .ipt_select_01 {
	width: 100%;
	color: #000;
	background-color: ButtonFase;
	border-color: #A9A9A9;
  }			

戻る

ドキュメントのタグと貢献者

 このページの貢献者: wtrfp
 最終更新者: wtrfp,