このズレはよくあることのようで定番の解決策があるようです。
結論から言えば、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 って面倒くさい。
ってことで、窮屈なのはあんまりなので、とりあえず、
で、お茶を濁しておこうと思います。
でわでわ。
