リストに指定したマークの位置がずれてしまいます

解決済

質問者：mikiputi
質問日時：2008/07/07 10:16
回答数：2件

特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。
safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。
リストマークのサイズは20×20です。

マークをlist-style-type: square;などにすると普通に表示されます。
非常に困っています。宜しくお願いします。

<style type="text/css">

</style>

<style type="text/css">

</style>
<link rel="shortcut icon"href="/images/favicon.ico" />
<style type="text/css">

</style>
</head>

<body>
<div id="base">
<ul>
<li> <a href="main.html" target="mainFrame">Home</a></li>
<li> <a href="image.html" target="mainFrame">Image</a></li>
<li> <a href="flash.html" target="mainFrame" >Flash</a></li>
<li> <a href="logic.html" target="mainFrame" >Music</a></li>
<li> <a href="link.html" target="mainFrame"> Link</a></li>
</ul>
</div>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： outbrave
回答日時：2008/07/07 18:50

list-style を、やめて background での表示ではダメでしょうか。

ul {
font-size: large;
font-weight: bold;
margin: 10px 0 0 0;
padding: 0;
list-style: none;
}

li {
padding: 0 0 20px 40px;
background: url(images/arrow.gif) no-repeat 10px 2px;
}
/*
padding 20px の調整で line-height の代用、40px の調整で左からの位置を変えれます。
background 10px 2px の調整で画像の表示位置を変えれます。
*/

上記の方法がいやなら、無視してください。

- 0
- 件

通報する

この回答へのお礼

大変参考になりました。backgoundにするのが一般的なのでしょうか？

通報する

お礼日時：2008/08/03 17:17

No.2

回答者： abril
回答日時：2008/07/08 15:09

list-style-imageプロパティでリストマークを画像にした場合の表示位置（画像の大きさに対するテキストとの位置のバランス）は各UAに依存しますので、CSSでは調整できません。

なので、「IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されて」という状態は「リストに指定したマークの位置がずれて」しまっているわけではなく、そのUA上でのディフォルト表示なのです。「マークをlist-style-type: square;などにすると普通に表示」されるのは、その場合のリストマークはテキスト部分と（フォント・サイズ等が）セットになっているから常に相対的にバランスが取れている為です。
リストマークに画像を使い且つ微妙な位置の表示にこだわる場合は、ANo.1の回答者様がアドバイスされている通り、liに対するbackgroundとpaddingの各プロパティで設定するしかないですね。こちらの方法の方が使い勝手がいいことは確かです。