IE8のmax-heightとoverflowのバグ

地味にハマったのでメモ。

max-heightを設定してoverflowをscrollやautoにすると、IE８ではmax-heightが普通のheightのように設定されてしまう。
回避策としてdivを入れ子にしてoverflowを設定後、その中に再度divを設定してmax-heightの設定をするときちんと表示される。

全くもって意味の分からない話だが、どうやらIE８のバグらしい。
このためにわざわざCSSを別々に分けて入れ子にするという手間のかかりよう…。

ダメな例

CSS

.AAA { max-height:300px; overflow:scroll;}

HTML

<div class="AAA">
     <table>
          <tr>
             <td>contents2</td>
             <td>contents2</td>
          </tr>
            ～
          <tr>
             <td>contents3</td>
             <td>contents4</td>
          </tr>
     </table>
</div>

いい例

CSS

.AAA { overflow:scroll;}
.BBB { max-height:300px;}

HTML

<div class="AAA">
  <div class="BBB">
     <table>
          <tr>
             <td>contents1</td>
             <td>contents2</td>
          </tr>
            ～
          <tr>
             <td>contents3</td>
             <td>contents4</td>
          </tr>
     </table>
  </div>
</div>