Chrome 问题中的左侧浮动图像<li>

Question

我试图创建一个有序列表，其中包含一个左浮动图像+每个li的链接。

它在IE9和FF中可以正常工作，但在IE8和Chrome上都无法正常工作。

这是一个非常直接的东西，像这个

<li><img style="float:left" src=".." /><a href="..">some text</a></li>

我是新来的，所以我不能附上截图，但我会描述这个问题：

它在IE9和FF中正常工作，但在Chrome上的列表编号（1。2.3）与图像重叠。或者你可以这样看：图像漂浮在<li>，包括列表编号。

可能是什么问题？我使用了非常基本的CSS和HTML，并在网站上搜索了可能的解决方案。

我的HTML代码就像这个

<li><a href="/v4/Profile/0"><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg"></a>
    <a href="/Message/390638-Mind-Game">Mind Game</a><br />
    <span class="msgInfo">(8 Replies)</span></li>

图像是一个化身，所以它比文本高。我想让头像飘到左边，右边有两行文字。我不确定是否有其他方法可以在没有左浮动的情况下实现这一点

Answer 1

我在Chrome中遇到了同样的问题，并通过将我的li内容放入div中来解决它。所以你的代码最终会是这样的：

<li><div><a href="/v4/Profile/0"><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg"></a>
    <a href="/Message/390638-Mind-Game">Mind Game</a><br />
    <span class="msgInfo">(8 Replies)</span></div></li>

这样，列表中的点或数字就在图像前面，不再与图像重叠。

Answer 2

Chrome中严格要求<ol> or <ul>标签才能正常工作

Answer 3

只有在需要时才使用float属性。它通常用于解决浏览器之间的对齐问题。相反，尽量给你的图像和文本留出空白。如果什么都不起作用，那么你可以使用一个小的Javascript调整来解决Chrome问题

当你的页面加载时，把这个放在你的

if(window.chrome != undefined)
{
    //remove float and add some margin image/text
}

Answer 4

为什么要浮动？

这在Chrome中适用于我：http://jsfiddle.net/ShStb/

编辑：我会尝试使用vertical-align。

查看更新后的jsfiddle：http://jsfiddle.net/ShStb/2/

我将元素的vertical-align更改为以下值：

ol li img {
    vertical-align: middle;
}
ol li a {
    vertical-align: top;
}

​