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

Opened 11 years ago

Closed 11 years ago

#2553 closed defect (fixed)

IE6でfirst-child擬似クラスが使えないためにレイアウトが崩れる箇所がある

Reported by: ogawa Owned by: takai
Priority: major Milestone: OpenPNE2.12.0
Component: pne-xhtmlcss Version: 2.12.x & 2.14.x
Keywords: Cc:

Description (last modified by ogawa)

IE6でfirst-child擬似クラスが使えないためにレイアウトが崩れる箇所がある問題に対応する。

以下のどちらかで対応する。

  • class 属性を与える
  • JavaScript で first-child を使えるようにする

Change History (8)

comment:1 Changed 11 years ago by ogawa

Component: 指定しないpne-xhtmlcss
Description: modified (diff)

comment:2 Changed 11 years ago by takai

HTMLに静的にクラスを振るのは非効率なので、JSを用います。

  • IE7.js : IE7で対応している機能に対応するように動的に処理します。
    • :first-child 擬似クラスに対応できますが、動的なので処理に時間がかかります。
  • offspring.js : :first-child 擬似クラスに相当する要素に、first-child クラスが追加されます。
    • :first-child 擬似クラスのスタイル指定には対応できません。
    • HTMLに静的にクラスを振った状態になります。クラス名は first-child です。
  • IE6 だけの問題ですが、IE7.js は処理時間が気になるので、offspring.js を用いることにします。
    • :first-child 擬似クラスを使わず、全て(ハックを除いて) .first-child クラスに書き換えます。
    • CSS r7481

offspring.js適用方法

  • offspring.js : <script type="text/javascript" src="offspring.js"></script> をヘッダに記す。
    • offspring.js をダウンロードして、ヘッダで読み込む。
    • first-child クラスを与えるために用いているので “light” mode にしても問題ない。
  • CSS中の :first-child を .first-child に書き換えたので、IE6だけでなく全てに読み込ませる。
    • コンディショナルコメントなどを使わず、prototype.js などと同様に普通に読み込む。

comment:3 Changed 11 years ago by ebihara

調査・対応ありがとうございます。

OpenPNE本体への適用をおこないます。

comment:4 Changed 11 years ago by ebihara

Keywords: 確認中 added

以下のリビジョンで対応しました。ご確認ください。

comment:5 Changed 11 years ago by ogawa

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

遅いので :first-child 擬似クラスと .first-child クラス両方を指定するようにしましょう。

comment:6 Changed 11 years ago by ebihara

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

以下のリビジョンで修正しました。ご確認ください。

comment:7 Changed 11 years ago by ogawa

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

comment:8 Changed 11 years ago by kiwa

Keywords: テスト待ち removed
Resolution: fixed
Status: newclosed

IE6で確認しました。更新直後に一瞬だけ線が二重になりますが、問題はありません。

Note: See TracTickets for help on using tickets.