- ベストアンサー
リストに指定したマークの位置がずれてしまいます
特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </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）
- 専門家の回答
質問者が選んだベストアンサー
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 の調整で画像の表示位置を変えれます。 */ 上記の方法がいやなら、無視してください。
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
list-style-imageプロパティでリストマークを画像にした場合の表示位置（画像の大きさに対するテキストとの位置のバランス）は各UAに依存しますので、CSSでは調整できません。なので、「IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されて」という状態は「リストに指定したマークの位置がずれて」しまっているわけではなく、そのUA上でのディフォルト表示なのです。「マークをlist-style-type: square;などにすると普通に表示」されるのは、その場合のリストマークはテキスト部分と（フォント・サイズ等が）セットになっているから常に相対的にバランスが取れている為です。 リストマークに画像を使い且つ微妙な位置の表示にこだわる場合は、ANo.1の回答者様がアドバイスされている通り、liに対するbackgroundとpaddingの各プロパティで設定するしかないですね。こちらの方法の方が使い勝手がいいことは確かです。
お礼
詳しいご説明ありがとうございます。 大変参考になりました。ありがとうございました。
お礼
大変参考になりました。backgoundにするのが一般的なのでしょうか？