IE7 CSS错误将<img/>与<ul> </ul>中的文本对齐

Question

过去几天我一直在敲打这个IE7错误，现在是时候诉诸人群了。

我有以下HTML和CSS：http://beerpla.net/for_www/ie7_test/test.html

目标是拥有<ul>，每个<li>包含一个小图标和一些文字。多行文本将与自身对齐，而不是在图像下包裹。

我尝试在图像和其他一些东西上使用float:left，最后我认为position:absolute肯定会起作用，但在IE7中我一直看到文字弹出到下一个行并与图像不对齐：

这是我期望的样子：

我甚至尝试使div display:inline哪种工作但后来开始在图像下包裹长线，所以这不好。 zoom:1也产生了类似的效果。

此刻我不知所措。此代码适用于所有其他浏览器。 IE7是一个特殊的，非常特殊的孩子。

有什么想法吗？

谢谢。

编辑：如果你有IE8，你可以通过按F12然后按Alt-7来模拟IE7。

Answer 1

而不是将图像作为元素，尝试使用背景属性。像这样

ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }

注意：您可能需要调整填充以适应图像和文本之间要保持的距离。

Answer 2

尝试在li上使用填充而不是div上的边距。如果显示：内联工作，它可能是IE以一些神秘的方式扼杀div的盒子模型：在li上填充并且可能显示：div上的内联可能会解决它。

Answer 3

将<img>标记移至<div>可修复此问题。我还不知道为什么IE7会做它的功能。

Answer 4

返回浮动您的图片，然后将overflow: hidden;添加到div。文本将不再包裹在图像下方，除非您尝试从div内部定位内容（没有在此处看到），否则没有副作用。完全兼容的跨浏览器。使用IE6，您只需添加hasLayout即可获得相同的效果。