--- title: 文字列の表示位置がずれる slug: orphaned/Web/Compatibility_FAQ/Misaligned_Text.html tags: - Compatibility - Layout original_slug: Web/Compatibility_FAQ/Misaligned_Text.html ---

概要

　文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。
　その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。

表示画面

要因

　複数の要因が考えられますが、代表例として以下があります。

  1. ブラウザ間でのデフォルト値の差異
    ブラウザ毎でデフォルト値を持っています。 line-height: normal; 等で指定するとデフォルト値で表示されます。
    しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。

    　　.recommended {
	text-decoration: none;
	display: inline;
	width: auto;
	height: auto;
	line-height: normal;
	vertical-align: baseline;
　　}

  2. ベンダープレフィックス
    他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。

    　　#button-06 {
	display: table;
	width: 99.9%;
	-webkit-box-sizing: border-box;
　　}

  3. ブラウザ間でのpx指定の差異
    様々なアイコン上の文字列をCSSのpaddingプロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。
    これは、ブラウザ間でpx指定の差異があるために発生しています。

    　　.gender-type {
	padding-top: 3px;
　　}

解決策

　各要因の解決策の代表例として以下があります。

  1. ブラウザ間でのデフォルト値の差異
    デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、
    明示的に値を指定することで正しく表示できます。

    　　.recommended {
	text-decoration: none; display: inline;
	width: auto;
	height: auto;
	line-height: 1;
	vertical-align: baseline;
　　}

  2. ベンダープレフィックス
    webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。
    -webkit-box-sizingプロパティの場合は、box-sizingプロパティを追記することでFirefoxでも指定を行うことができます。

    　　#button-06 {
	display: table;
	width: 99.9%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
　　}

  3. ブラウザ間でのpx指定の差異
    指定に差異が出てしまっているものに関しては、個々の要素にpaddingプロパティ指定を追記し、
    それぞれで調整を行うことで、想定の表示を行うことが可能となります。

    　　.gender-type.blc-hdr-rgt {
	float: right;
	padding: 1.5px;
　　}

メリット

　・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。

戻る