IE7 CSS错误将<img>与<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

将<img>标记移动到<div>中可以解决这个问题。我仍然不知道为什么IE7会这么做。

Answer 2

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

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

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

Answer 3

尝试在li上使用填充，而不是在div上使用边距。如果显示:内联工作，可能是IE窒息的计算出div的盒子模型，以某种神秘的方式:填充在李上，也许显示:内联在div上可能会熨掉它。