Fu*kin' IE7

それ系 CSS

CSSに関するIE7の謎の挙動で苦労させられた。（しかもこれはIE6では見られない挙動らしい。）

<div class="x">
    <p></p>
</div>

みたいなソースがあってclass "x"でdivのパッディングとか指定してあったのだが、なぜか

<div class="x">
    <p><a></a></p>
</div>

になると突然CSSの指定を無視して意味不明のデザインが設定される。（当然、Firefoxとかでは問題ない。）


ボーダーを表示させてみてみると、どうやらボックスモデルがおかしくなるらしいことが分かったのだが、どうしようもない。


結局、「ボックスモデルがおかしいなら、もっと強烈なボックスで囲んでやれば良いんだろう！」ということでp要素全体をテーブルで囲んでやると何とか普通に表示されるようになりました（笑）

こんな感じ？


<div class="x">
    <table class = "y"><tr><td>
        <p><a></a></p>
    </td></tr></table>
</div>


当然、なるべくtableの存在が目立たなくなるように色々とCSSを調整…


CSSの問題というよりも、ボックスモデルの実装がおかしいのかもしれません。