久しぶりの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

 

今さらながら勉強になります。。。。

css, バグ

Posted by まえとも