ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#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 kudo)

■概要

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 11 years ago by takai

Status: newassigned

comment:2 Changed 11 years ago by takai

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

comment:3 Changed 11 years ago by takai

overflow: hidden の指定を整理。

comment:4 Changed 11 years ago by takai

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

comment:5 Changed 11 years ago by takai

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

comment:6 Changed 11 years ago by takai

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

comment:7 Changed 11 years ago by takai

Keywords: 確認中 added

comment:8 Changed 11 years ago by takai

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

comment:9 Changed 11 years ago by ebihara

Keywords: 確認中 removed
Milestone: OpenPNE2.13.3

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

comment:10 Changed 11 years ago by ebihara

Keywords: 確認中 added

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

comment:11 Changed 11 years ago by kiwa

Keywords: 差し戻し added; 確認中 removed

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

以下OpenPNE開発談義より抜粋

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

comment:12 Changed 11 years ago by ebihara

Keywords: 確認中 added; 差し戻し removed

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

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

comment:13 Changed 11 years ago by ogawa

Keywords: テスト待ち added; 確認中 removed

comment:14 Changed 11 years ago by kiwa

Resolution: fixed
Status: assignedclosed

comment:15 Changed 10 years ago by kudo

Description: modified (diff)
Keywords: テスト待ち removed
Note: See TracTickets for help on using tickets.