2.12.x以降のCSS、clearfix手法を見直す

[takai]

■概要

XHTML+CSS化において、ダブルフロート型のレイアウトを実現している親ボックスに関して、現在は、

parentBox {
	zoom: 1;                        /* for IE */
	overflow: hidden;               /* for ALL */
	overflow: -moz-scrollbars-none; /* for Netscape, Mozilla */
}

と指定して、いわゆるclearfix相当に対応している。

一見対応できているように見えるが、overflow: -moz-scrollbars-noneがNetscape, Mozillaに対して副作用をもたらしており、結果的に崩れるケースが生じている。

• -moz-scrollbars-xxxx という指定を行うと、そのボックスの左パディング値が右パディングに加算される（実際に確認しているだけで、症状としてこの説明が正しいとは言い切れない）

• zoom, -moz-scrollbars-none が独自拡張なため仕様に対してinvalidである
• CSSに何箇所も記述していて可読性に欠ける
  • HTML側にclearfixクラスを振ることがよいとは言えないが、それも含めて見直す

■仕様

以下タスク。

• 対応ブラウザ、対応させたいブラウザを考慮して、clearfixの決定版を考える。
• clearfixの適用の仕方（clearfixクラス埋め込み or セレクタ羅列）を考える。

■関連情報

[takai]

• CSS側で複数のセレクタに clearfix のスタイル指定を与えることにする。
• 併せて、overflow: hidden の必要な箇所を特定する。

[takai]

• CSS: r8410

overflow: hidden の指定を整理。

[takai]

• CSS: r8413
  • ddにoverflow: hidden は崩れる（フロートマージン型への影響＋IE6(min-)heightの制御がoverflow: hiddenで高さが固定される）

[takai]

• CSS: r8415
  • overflow: hidden を指定している要素がインライン化されている場合、その親要素が overflow: hidden である必要がある。
  • ulなども対応することになる。

[takai]

• CSS: r8417
  • li に overflow: hidden をすると NN7.02 で不具合が生じたため、若干回りくどい指定をしている。
  • その他は素直に clearfix を適用した。

[takai]

#2844で修正に関して説明しています。

[ebihara]

対応ありがとうございます。取り込みをおこないます。

[ebihara]

r8417 で CSS の変更をマージしました。

[kiwa]

r8410の修正が安定版に混入しています。

以下OpenPNE開発談義より抜粋

[17:42:33] 海老原昂輔の発言: マージ時のコンフリクト解消時に、開発版のみに入った http://trac.openpne.jp/changeset/8410 の修正が混入してしまったのが原因っぽい。
[17:42:49] 海老原昂輔の発言: 安定版でこの現象が起きるのは問題なのでチケットを差し戻しておいてください。

[ebihara]

comment:11 の内容は #2981 に関連するものなので修正はそこでおこないます。

こちらのチケットは確認中とします。