IEでdescriptionBoxのレイアウト崩れ

[imamura623]

■概要

IE7だとdescriptionBoxのレイアウトが崩れる

■原因

コメント参照

■修正内容

以下のCSsを追記し、IE7でのレイアウト崩れを回避した。

*:first-child+html p {
	overflow: visible;
}

■関連情報

​http://sns.openpne.jp/?m=pc&a=page_fh_diary&target_c_diary_id=21068より転記

既出でしたらすみません。

最新版2.14で、IEの場合descriptionBoxの下幅が広くなっています。
paddingもとれていないようです。

写真１：IE7.05 写真２：FireFox3.0.11

ver2.14RC1 

[takai]

問題を確認しました。2.12でのXHTML化における、あるスタイルの一括が原因です。

• 崩れを確認できたのは IE7, IE8 です。
• IE6 および Firefox, Opera, chrome, Safari では生じないようです。

この問題の原因は、崩れるブラウザの実装に因ります。私がCSSの仕様を厳密に理解していないのでIEの実装不備と言い切れません。

dd div, dt, ul, ol, td, th, p,
h1, h2, h3, h4, h5, h6, .partsHeading,
fieldset, label {
	overflow: hidden;
}

具体的には、任意の要素が長い英単語などでoverflowするのを防ぐという意図で、上記のようなスタイルを記述していました。

今回の問題は、p要素への overflow: hidden 指定を外す（上記から、セレクタ p を外す）と解消できます。

まだ本質的な原因を追究できていないので、この問題がなぜ起こるのか（ブラウザのバグか、仕様上あり得る妥当な挙動なのか）について言及できません。

p要素以外に同様の影響があることを考えて上記のスタイル記述を丸ごと削除することも考えられますが、逆に削除することによる影響も懸念されます。

この問題に関して更に調査を進めてより本質的な解決策を示したいと思います。

[takai]

更なる調査結果を示します。

まず、調査していた環境に不具合があり、IE6, 7, 8 の環境をきちんと整えられていませんでした。IE8で確認していたつもりでしたがIE7相当の表示結果となっており、IE8での挙動が正しく確認できていませんでした。

崩れを確認できたのは IE7, IE8 です。

と示しましたが、正規のIE8では問題は生じませんでした。

ここまでで『overflow: hidden の記述が原因で IE7 のみで起こる問題』と言えそうですが、この問題は hasLayout 絡みの問題である可能性が高いようです。 overflow: hidden の代わりに、hasLayoutプロパティに（確実に）影響がある他のプロパティ(zoom: 1)を指定したところ、同じ問題が IE7 および IE6 で生じました。

現状のスタイル記述（の意図）と、修正した際の影響を考えて、今回は次のような対応を示します。

dd div, dt, ul, ol, td, th, p,
h1, h2, h3, h4, h5, h6, .partsHeading,
fieldset, label {
	overflow: hidden;
}

を次のように変更する。

dd div, dt, ul, ol, td, th,
h1, h2, h3, h4, h5, h6, .partsHeading,
fieldset, label {
	overflow: hidden;
}

• p要素をセレクタから外し、p要素に overflow: hidden を適用しないようにします。

[kiwa]

ソースに反映させます

[kiwa]

2.14, trunkは修正しました。

• 2.14 - r13397
• trunk - r13398

2.12はCSSが上のものとはちがったので、現在調査中です。（そのため確認中にもしません）

[takai]

2.12では comment:5 に相当する修正は、xhtml_style.php(153～155行目あたり)

p {
	overflow: hidden;
}

を削除することです。

ただし、hasLayout プロパティ値による問題（つまりIE7のみの問題）であるため、

• 連続した長い英数（記号）文字がはみ出さないように overflow: hidden プロパティを指定している
• IE では overflow: hidden で隠れるよりも先に word-break プロパティで折り返される

このことを考えると、IE7のみp要素に対して overflow: visible を指定した方がよいかもしれません（前述の修正を行わずに、以下のコードを追記する）。2.12だけでなく2.14に対しても同様のことが言えます。

*:first-child+html p {
	overflow: visible;
}

なお、word-break プロパティは文字列しか折り返さないので、文字サイズが大きい場合や、内容が画像など幅・高さを持っている場合には、内容がボックスをはみ出してしまいます。これを防ぐには、overflow プロパティ指定をどの要素に指定すべきかについて考察する必要があります。

[kiwa]

以下のリビジョンで comment:8 の変更を取り消しました。

• 2.14 - r13409
• trunk - r13410

以下のリビジョンで comment:9 の指摘を取り込みました。

• 2.12 - r13413
• 2.14 - r13411
• trunk - r13412

[kiwa]

サンプル画像

[ShogoKawahara]

チェックしました

[imamura623]

表示確認しました。問題ありません。