Изображение с плавающей запятой в пределах проблемы <li>Chrome

Question

Я пытался создать упорядоченный список, который содержит левое изображение с плавающей точкой + ссылку для каждого li.

Он работает, как и ожидалось, в IE9 и FF, но не в IE8 и не в Chrome.

Это был очень простой материал, подобный этому

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

Я новичок здесь, поэтому я не могу прикрепить скриншоты, но я опишу проблему:

Это работает, как ожидалось вIE9 и FF, но в Chrome номер списка (1. 2. 3.) перекрывает изображение.Или вы можете посмотреть на это так: изображение плавает слева от

, закрывая номер списка.

В чем может быть проблема?Я использую очень простые 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>

Изображение является аватаром, поэтому оно выше текста,Я хочу, чтобы аватар плавал влево, а справа - 2 строки текста.Я не уверен, есть ли другой способ сделать это без левого плавающего

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

теги <ol> or <ul> строго необходимы в Chrome, чтобы все работало нормально

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;
}