
このズレはよくあることのようで定番の解決策があるようです。
結論から言えば、list-style-image でリストアイコンを指定するのではなくて、 list-style-type:none でリストアイコンを全て非表示にしちゃった上で、リストアイコンは背景画像として表示し、<li> は padding: 0 0 0 15px とかでずらして表示させる、というのが定番のテクニックのようです。
参考リンク:list-style-imageでリストイメージがズレます・・。| Yahoo! 知恵袋
もともとずれていた時の CSS はこんな感じでした。
ul { list-style-image: url("images/tweet_icon.png"); margin-left: 40px; } li { /* なにも指定なし */
}
この CSS を適用した場合のズレがこちら。
そこで、定番テクニックどおり、<ul> を、
ul { list-style-type:none; }
でリストアイコンを非表示にして、<li> に、
li { background:url("images/tweet_icon.png") left no-repeat; padding: 10px 0 10px 30px; }
で、背景画像を指定し、padding でずらしました。
背景画像に変えた CSS を適用した場合の表示がこちら。
おー、なおった。
けど・・。
リストアイコン(背景)が真ん中だし。
上揃いにしたいということで、<li> の CSS に、「top」を追加して、
li { background:url("images/tweet_icon.png") top left no-repeat; padding: 10px 0 10px 30px; }
こうしてみたら、
もとに戻った(;_;)。
これは、padding の上下を設定しているせいだと思われ、padding の上下を 0px にすると、
今度はつまった(;_;)。
なんか、CSS って面倒くさい。
ってことで、窮屈なのはあんまりなので、とりあえず、
で、お茶を濁しておこうと思います。
でわでわ。