liにfloatをかけた場合、IE7で表示が崩れる

2011年06月20日

IE7での表示

備忘録として。

liタグに、floatをかけるとIE7で折り返し表示が崩れます。次行にいかずに、liの中で折り返しをしてしまいます。

cssタグの編集

IE7はliの余白で表記が崩れることがあるようなので、まずは、white-space:nowrap と追記します。

修正後のIE7での表示

この段階でも、折り返しは次の行にいき、うまくいっているようですが、編集画面で折り返しが縦に長く表記されてしまっているので、position:relative というスタイルを追記します。

cssの追記

これで、編集画面でのプレビューもきちんと折り返しされるようになりました。

タグ:IE7 バグ CSS float LI
posted by nobu at 18:24 | Comment(1) | ノウハウ
この記事へのコメント
ありがとうございました。
Posted by universe1225 at 2013年02月07日 11:51
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: