CSSテクニックコミュのIEの文字サイズ変更をすると『小』で改行されてしまう。

画像の様にIEで『文字サイズ　中』『文字サイズ　最大』なら問題ないのですが
『文字サイズ　小』にすると改行してしまいます。

対処方法がわかる方おられましたら　アドバイスいただけたら嬉しいです。

昨日からいろいろやっているのですが　気がついたら明るくなっていました

今は、『li』に『width:23em;』を設定しています。

ソース

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div class="box">
<ul>
　　<li><img src="icon.gif" alt="" width="23" height="12" />あああああああああああああああああああああ</li>
　　<li><img src="icon.gif" alt="" width="23" height="12" />いいいいいいいいいいいいいいいいいいい</li>
　　<li><img src="icon.gif" alt="" width="23" height="12" />うううううううううううううううう</li>
　　<li><img src="icon.gif" alt="" width="23" height="12" />えええええええええええええええええええ</li>
</ul>
</div>

</body>
</html>

スタイルシート

* {
　　font-size:100%;
}
body {
　　line-height:1.5em;
　　font-size:82%;
　　color:#333;
　　margin:0 auto 0 auto;
　　padding:0;
　　text-align:center;
　　height:auto;
　　font-family:Verdana, Arial, sans-serif;
　　background-color:#ffe;
}

.box ul {
　　margin:0 0 0 40px;
　　padding:0 0 20px 0;
}
.box ul li {
　　margin:12px 0 0 0;
　　padding:0;
　　font-size:107%;
　　font-weight:bold;
　　border-bottom:solid 1px #3c9700;
　　width:23em;　　　　

}

です。

どうぞ　よろしくお願いいたします。

コメント(11)

最初
全て
最新の40件

[2] mixiユーザー 07月19日 08:37

ためさないままの提案で何ですが…
恐らく原因は幅が変わる<li>内に固定幅の<img>があるせいかと思います．なので
　１）23em以上の幅を<li>に設定する
　２）マーカーをcssで<ul>に設定（ul {list-style-image: url("icon.gif");}）し，
　　　<img>を消す．
などの方法でいかがでしょう？

[4] mixiユーザー 07月19日 08:46

>飴ちゃんさん

HTML側のwidthを抜きましたが　変化ありませんでした。

>Periaさん

１）だと　『中』と『最大』の時に　緑の線が右側にあまりすぎるんです。
２）だと　緑の星の下に　緑の線が入らなくなるんです。

[6] mixiユーザー 07月19日 09:28

面白い記事をみつけました。
良かったら参考にしてみて下さい。

http://doubletype.org/wiki/index.php/About_em/ja
http://css-bug.jp/win/ie/ver6_under/0018/

[7] mixiユーザー 07月19日 10:12

手元にPCがないのでこれで本当に改善されるかわからないのですが…。

img要素を消して、マーカー画像はCSSでli要素の背景として設定。
そしてliのpadding-leftを1em、widthを24emにする。
ブラウザのデフォルトスタイルシートの影響で崩れるかも知れないから、全称セレクタか何かでmarginとpaddingを0にした方が良いかも。

# width:23em+23px;、みたいな事が出来ればいいのにね。
# いや、そもそも内容に依存したCSSの指定自体が良くないって突っ込みはなしですよね…

[9] mixiユーザー 07月19日 10:51

今PCで確認してみました。
font-familyとfont-sizeの指定をしなければ大丈夫みたいです。

[10] mixiユーザー 07月19日 14:33

>yo-yoさん

ありがとうございます。
em以外で可変な横幅指定方法があったらよかったのに・・・

>蠶さん

ありがとうございます。
企業サイトなのでfont-familyとfont-sizeを指定しないわけにはいかないです。
検証までしていただいたのに　ごめんなさいね。

[11] mixiユーザー 07月19日 15:15

自己解決しました。

『li』に『white-space:nowrap;』を入れたら　改行されなくなりました。

灯台下暗しと言うか　基本に返って考えていればすぐわかったと言うか・・・
ややこしくややこしく考えてしまっていました。

こんな私にお付き合いくださり　いろいろ考えてくださった方々
ありがとうございました。

犬の散歩中に思いつきました。
気分転換って必要なんですね。

ほんとうにごめんなさい。お騒がせしました。

ログインすると、みんなのコメントがもっと見れるよ