IE 6でのspanタグ改行問題解決--''white-space:nowrap'は純粋なテキストコンテンツにのみ適用されます

標準リファレンス

W 3 C CSS 2.1仕様の「white-space:nowrap」設定によれば、この値は「normal」のように空白をマージするが、テキスト内の行をブロックすることを意味する.
詳細については、「16.6 White space: the 'white-space' property」を参照してください.
置換要素は、CSSフォーマットモデルの表示範囲を超えた要素を表すために使用されます.これらの要素の共通の特徴は、幅を設定していない場合にデフォルトの幅を持つことです.よくあるのは、IMG INPUT TEXTAREA IFRAMMEなどです.
詳細については、「replaced-element」を参照してください.

問題の説明

コンテナに「white-space:nowrap」特性値を設定した後、内容の改行を抑制することが望ましい.ただし、コンテナ内にテキストコンテンツがなく、行内置換要素と行内ブロック要素のみが存在する場合、IE 6 IE 7 IE 8(Q)Operaブラウザは、これらの要素が文字コンテンツではないと判断し、コンテンツ改行規則が有効にならないことを抑制する.コンテナレイアウトの幅が足りない場合、行内置換要素と行内ブロック要素は、親コンテナ'white-space:nowrap'プロパティ値に拘束されず、改行されます.

もたらす影響

本来改行したくない部分に改行が生じ、各ブラウザにおける小範囲レイアウトの違いが生じる.

影響を受けるブラウザ

IE6 IE7 IE8(Q) Opera

もんだいぶんせき

CSS 2.1仕様の説明に従って、「white-space:nowrap」値の設定はテキスト内の行をブロックします.

  ： nowrap
    This value collapses white space as for 'normal', but suppresses line breaks within text.

説明ではtext単語に二義性の問題があり,本文を表すことも通常の意味の文字内容として表すこともできる.
実際の状況では、エレメント内にはテキストのみが含まれているだけでなく、親エレメント内で本文を構成する行内置換エレメントや行内ブロックエレメントなどの他の行内エレメントも存在する可能性があります.仕様に記載されているtextが本文の意味である場合、「white-space:nowrap」プロパティ値の設定は、これらの要素間の改行を抑制します.逆に、「TEXT」は通常の文字を意味し、改行を抑制するポリシーはこれらの要素に有効ではありません.
次のコードを分析します.

<style>
  body { font:20px/1.2 'simsun'; }
  div { width:60px; background:wheat; margin:10px 0; }
</style>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><img src="google.png" /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><input /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><input type="button" /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><input type="submit" /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><input type="file" /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><input type="checkbox" /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><input type="radio" /></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><textarea></textarea></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><select></select></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><iframe></iframe></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><button></button></span>
</div>
<div>
  <span style="white-space:nowrap;">   </span><span style="white-space:nowrap;"><span style="display:inline-block">  </span></span>
</div>

前述の例では、コンテナDIV要素の幅は60 pxであり、「white-space」プロパティ値はデフォルトの「normal」であり、コンテナ内のタグは緊密に配列されており、改行やスペースによって匿名の行内要素は生成されません.これにより、コンテナの「white-space:normal」設定は、コンテナの内容が改行されているかどうかに影響しません.
容器内の最初のSPAN要素には3つの中国語があり、各中国語の番号は20 pxに設定され、全体の幅は容器幅60 pxにぴったりです.このSPAN要素には「white-space:nowrap」プロパティ値も設定されており、その内の3つの文字が改行を抑制することを示しています.
2番目のSPAN要素は「white-space:nowrap」プロパティ値を設定し、その内部サブ要素はテキスト内容を生成しません.それぞれ、通常の行内置換要素と行内ブロック要素です.
実際の実行結果は次のとおりです.
1
IE6 IE7 IE8(Q) Opera IE8(S) Firefox Chrome Safari
一般的な行の置換要素
行内ブロック要素
改行を生成
改行なし
改行を生成
改行なし
【注】:IE 6 IE 7 IE 8(Q)は、厳密な意味でCSS 2.1仕様内で説明されている「display:inline-block」特性値をサポートしていないが、「inline-block」を設定すると、IE特有のhasLayout特性がトリガーされ、行内要素にレイアウトブロック特性を持たせる.これは仕様記述が達成する効果と一致する.hasLayoutプロパティの詳細については、MSDN:"HasLayout" Overviewを参照してください.
表から次のことがわかります.

IE 6 IE 7 IE 8(Q)Operaは、行内置換要素および行内ブロック要素は仕様内で説明されたテキスト内容ではなく、親コンテナのレイアウト幅が不足している場合に「white-space:nowrap」特性値に制約されず、改行が発生すると考えている.

IE 8(S)Firefox Chrome Safariは、行内置換要素および行内ブロック要素はいずれも容器内本文に属し、容器レイアウトの幅が不足していても改行の発生を抑制すると考えている.

ソリューション

「white-space:nowrap」プロパティ値を使用してコンテンツの改行を抑制する必要がある場合は、コンテナ内に置換要素および行内ブロック要素を追加することを避け、各ブラウザの仕様理解の違いを避けることが望ましい.