IE 9 CSS浮动问题！

Question

以下网页在IE 9中显示不正常。 似乎只有在IE 9中存在问题。

http://froyo.tv/test/

列表样式图像在图片上方！

IE9

Firefox，Chrome，IE8，...

编辑：我知道如何修复它！但我想知道IE9到底发生了什么

已修复：http://froyo.tv/test/index_fix.php

- user457015

---

我知道如何解决它。但微软又一次带来了兼容性问题，这不是很遗憾吗？ - user457015

测试页面仍然展示了这个问题！我不知道为什么只有在IE9中才会显示这样。但是当我在Firefox中使用Firebug进行检查时，列表确实在图片上方，但是在右侧显示。 - user457015

Answer 1

我不确定为什么IE9的表现不同，但您可以通过以下方法使其保持一致：

• 在.image上删除margin-right: 30px。
• 在.detail上删除width: 500px（您可能希望添加较小的width）
• 向.detail添加float: left。

---

这是问题的简单复制。

• 错误：http://jsfiddle.net/Nh3kf/
• 已修复：http://jsfiddle.net/Nh3kf/1/

- thirtydot

---

我已经找到如何解决它了！真可惜，在安装几分钟后，我才发现IE9中出现了问题。 - user457015

这是我的修复方案：http://froyo.tv/test/index_fix.php，基本上和你的一样。在.detail上使用float:left似乎是关键。 - user457015

我同意这很可能是IE9的一个bug。除了我的回答中所述的方法，我找不到更好的解决办法了。 - thirtydot

Answer 2

这是解决IE9问题的方法：

li{list-style-position: inside;}

我猜测IE9没有列表符号“inside”。

在此处查看修复方法：

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

- Holger

Answer 3

好的，使用Chrome浏览器可以看到自定义列表图片，但IE9无法处理list-style-image。
不要使用它，尝试这个：
li {background:url(your_image.jpg) center left;}

- Michael

---

IE9支持list-style-image!!它们出现在左侧图像上方。 - user457015