#2958 closed task (fixed)
2.12.x以降のCSS、clearfix手法を見直す
Reported by: | takai | Owned by: | takai |
---|---|---|---|
Priority: | minor | Milestone: | OpenPNE2.13.3 |
Component: | pne-xhtmlcss | Version: | 2.12.x & 2.14.x |
Keywords: | Cc: |
Description (last modified by )
■概要
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 セレクタ羅列)を考える。
■関連情報
Change History (15)
comment:1 Changed 12 years ago by
Status: | new → assigned |
---|
comment:2 Changed 12 years ago by
- CSS側で複数のセレクタに clearfix のスタイル指定を与えることにする。
- 併せて、overflow: hidden の必要な箇所を特定する。
comment:4 Changed 12 years ago by
- CSS: r8413
- ddにoverflow: hidden は崩れる(フロートマージン型への影響+IE6(min-)heightの制御がoverflow: hiddenで高さが固定される)
comment:5 Changed 12 years ago by
- CSS: r8415
- overflow: hidden を指定している要素がインライン化されている場合、その親要素が overflow: hidden である必要がある。
- ulなども対応することになる。
comment:6 Changed 12 years ago by
- CSS: r8417
- li に overflow: hidden をすると NN7.02 で不具合が生じたため、若干回りくどい指定をしている。
- その他は素直に clearfix を適用した。
comment:7 Changed 12 years ago by
Keywords: | 確認中 added |
---|
comment:9 Changed 12 years ago by
Keywords: | 確認中 removed |
---|---|
Milestone: | → OpenPNE2.13.3 |
対応ありがとうございます。取り込みをおこないます。
comment:11 Changed 12 years ago by
Keywords: | 差し戻し added; 確認中 removed |
---|
r8410の修正が安定版に混入しています。
以下OpenPNE開発談義より抜粋
[17:42:33] 海老原昂輔の発言: マージ時のコンフリクト解消時に、開発版のみに入った http://trac.openpne.jp/changeset/8410 の修正が混入してしまったのが原因っぽい。 [17:42:49] 海老原昂輔の発言: 安定版でこの現象が起きるのは問題なのでチケットを差し戻しておいてください。
comment:12 Changed 12 years ago by
Keywords: | 確認中 added; 差し戻し removed |
---|
comment:11 の内容は #2981 に関連するものなので修正はそこでおこないます。
こちらのチケットは確認中とします。
comment:13 Changed 12 years ago by
Keywords: | テスト待ち added; 確認中 removed |
---|
comment:14 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:15 Changed 12 years ago by
Description: | modified (diff) |
---|---|
Keywords: | テスト待ち removed |
Note: See
TracTickets for help on using
tickets.