2011-12-15 11 views
0

私は順序付けられていないリストを使用するウェブサイトを作っています。これらのリストは、CSSのlist-style-image属性を使用するイメージ(いくつかのulの目盛り、他の目盛りの上の目盛り)を使用します。 IE7を除いて、すべてのブラウザで正常に動作します。IE7はリストスタイルの画像を順序付けられていないリストに表示しませんか?

IE7でページを表示するとリストが表示されますが、他のすべてのブラウザ(IE8、IE9、Chrome、Firefox、Safariなど)と同じように画像は表示されませんそれを表示してください。ここで

は、CSSです:

#carousel ul.benefits { 
float: right; 
width: 573px; 
margin-right: 18px; 
margin: 0px; 
margin-top: 10px; 
padding: 0px; 
padding-left: 30px; 
} 

#carousel ul.benefits li { 
font-family: "OpenSansRegular",Tahoma,sans-serif; 
font-size: 1.8em; 
font-weight: normal; 
color: #bdbdbd; 
list-style-image:url('images/white-tick.png'); 
float: left; 
width: 100%; 
} 

HTML:

<ul class="benefits"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

それは奇妙な問題と私は前に出くわすことがありません一つです。

答えて

4

IE7にはこれに関する既知のバグがあります。フローティングされたリストアイテムは、リストマーカイメージを表示しません。

おそらく、背景画像といくつかのパディングを使って同じことを達成できます。ここで

更新

sitepointの参照リンクです:http://reference.sitepoint.com/css/list-style-image#compatibilitysection

+0

おかげで、これはダムに聞こえるかもしれませんが、私がリストの時間を浮かべると、うまくいくでしょうか? – mickburkejnr

+1

浮動小数点数を削除すると*動作するはずです。 – Leo

+0

@Leo yahあなたはそれについて正しいです。また、HTMLがDTD形式を使用しているかどうかを確認してください。 –

1

レオはあなたが背景画像を使用する必要があります、言ったように:

#carousel ul.benefits li { 
background: url("images/white-tick.png") no-repeat 2px 5px transparent; /*adjust 2px & 5px until it looks correct */ 
display: block; 
padding: 2px 4px 2px 20px; /*adjust until you have enough left padding to account for your bullet */ 
} 
関連する問題