Question

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

它在IE9和FF中按预期工作，但在IE8和Chrome上没有。

这是一个非常直接的东西

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

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

它在IE9和FF中按预期工作，但在Chrome上，列表编号（1. 2. 3.）与图像重叠。或者您可以这样看：图像浮动在＆lt; li＆gt;的左侧，覆盖列表编号。

可能是什么问题？我使用非常基本的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：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;
}

Answer 3

Chrome中严格要求使用<ol> or <ul>代码才能正常运行

Answer 4

仅在需要时使用float属性。它通常用于解决跨浏览器的对齐问题。而是尝试为你的图像和文字提供边距。如果没有任何方法可行，那么您可以使用小的Javascript调整来解决Chrome问题

加载页面时将其放入您的

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

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

4 个答案: