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

[ogawa]

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

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

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

[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 などと同様に普通に読み込む。

[ebihara]

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

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

[ebihara]

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

• 2.12.x - r7488
• trunk - r7489

[ogawa]

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

[ebihara]

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

• 2.12.x - r7497
• trunk - r7498

[kiwa]

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