IE7のアコーディオン開閉で要素が正しく表示されなかった件に対応

古いIEのサポートが終了していっている昨今、大人の事情でいまだにIE7にも最低限対応しないといけなかったりします。

アコーディオンをJS（jQuery）で実装し、IE7でテストをすると…
ん？要素が表示されない…というかズレてる…時間が経つと正しい位置に出たり出なかったり。
floatさせているからか？absoluteで指定しているからか？むむむ…

その他のブラウザでは問題ないだけに、こういう時は非常に頭を悩ませられます。

原因はposition

よく確認してみると、どうやらposition:absoluteにした箇所が正しく表示されていないようです。
既に構築しているものを大幅に変更はできないし、そもそもposition:absoluteを使わないとうまく表示できないので、ちょっと困りました。

解決もposition

positionに狙いを定め、ググったり自分でもアレコレ試してみたところ、最終的に「親の親にもposition:relativeをあてること」や「position:absoluteをあてる親の変更をすること」で対応できました。

Before

<div>
  <div style="position: relative;">
    <p style="position: absolute;"></p>
  </div>
  <div style="position: relative;">
    <p style="position: absolute;"></p>
  </div>
</div>
<div>
  <div></div>
  <div style="position: relative;">
    <img style="position: absolute;" src="#">
  </div>
</div>

After

<div style="position: relative;">
  <div style="position: relative;">
    <p style="position: absolute;"></p>
  </div>
  <div style="position: relative;">
    <p style="position: absolute;"></p>
  </div>
</div>
<div style="position: relative;">
  <div></div>
  <div>
    <img style="position: absolute;" src="#">
  </div>
</div>