久しぶりのIE7 バグ
最近はIE7は動作対象からはずすことが多くなったので、忘れていた(知らなかった?)バグに遭遇。備忘録として残します。
その1: floatした要素の中身が表示されたり、されなかったりする。
<dl> <dt>aaa</dt> <dd>横並びする</dd> <dt>bbb</dt> <dd>横並びする</dd> <dt>ccc</dt> <dd>横並びする</dd> </dl>
cssでdt,ddを横並びさせます。
dt{ float:left; clear:left; width:4em; } dd{ margin-left:4em; margin-bottom:.5em; }
こんな感じで設定してたのですが、IE7で見ると、2番目のdtの中の要素が
消えている!
いつものようにググってみたら、同じ症状ではないですが、参考になるサイトを見てやってみたら表示されました。
それは、消えた要素の親要素にwidth:100%を指定するということです。
height:1px;でもいいみたいです。
私の場合は、width:100%;を指定したら解決できました!
floatした際に背景が消える件(IE編)
http://blog.webcreativepark.net/2007/01/08-231453.html
その2:インライン要素の上下のボーダーが消える
どうも、高さが親要素の高さを超えているのが原因らしいです。
これも解決方法みつけました!
消えるインライン要素に
position:relative
を加える方法。
参考になりました。ありがとうございます!
インライン要素に指定したパディングやボーダーの上下が消えるhttp://pentan.info/stylesheet/bug/winie046.html
今さらながら勉強になります。。。。