IE 9 CSS Float problem!

问题

The following web page is not showing properly in IE 9.

It seems to be only a problem in IE 9.

http://froyo.tv/test/

the list-style-image are over the image!

IE9

Firefox, Chrome, IE8, ...

EDIT: I know how to fix it! But I want to know what is really going on with IE9

Fixed: http://froyo.tv/test/index_fix.php

回答1:

I'm not sure why IE9 is behaving differently, but you can fix it to work consistently by:

• Removing margin-right: 30px on .image.
• Removing width: 500px on .detail (you may wish to add back a smaller width)
• Adding float: left to .detail.

---

Here's a simple reproduction of the problem.

• Broken: http://jsfiddle.net/Nh3kf/
• Fixed: http://jsfiddle.net/Nh3kf/1/

回答2:

This is a fix for the problem in IE9:

li{list-style-position: inside;}

I guess that IE9 doesn't have the list bullets "inside".

Se the fix here:

http://jsfiddle.net/Nh3kf/40/

回答3:

Okay, using Chrome I can see the custom list images, IE9 doesn't handle list-style-image.
Instead of using it, try this:
li {background:url(your_image.jpg) center left;}

来源：https://stackoverflow.com/questions/5359302/ie-9-css-float-problem