Почему изображение на веб-странице может быть перенесено после нескольких обновлений?

Question

Итак, я обнаружил эту странную ошибку, она настолько странная, и я не могу понять, почему она это делает. Я использую Firefox 3.5.7. Это не происходит в Internet Explorer 8, хотя. Так что, если вы посетите этот веб-сайт: http://www.ninjasliveclancodes.com/ и посмотрите в правом верхнем углу, где написано «Мировая война», и обратите внимание на него, потому что после нескольких обновлений вы увидите, что изображение значка немного сдвинулось, закрывая разрыв между картиной и словом "мировая война". Я узнал, что все они будут реагировать таким образом, если в слове будет пробел. Кто-нибудь знает, почему он это делает? Кроме того, как я могу остановить это от того, чтобы либо устранить пробел, либо оставить его?

Edit: В любом случае, я все еще хотел бы знать, как я могу закрыть разрыв между значком и словом. В IE8 это выглядит именно так, как я хочу, однако в Firefox 3.5.7

я не могу воспроизвести это

    <ol>
        <li><a href="http://www.worldwaralliancecodes.net/"><img src="http://www.NinjasLiveClanCodes.com/images/world-war-50.png" />World War</a></li>
        <li><a href="http://imobsterscodes.net/"><img src="http://www.NinjasLiveClanCodes.com/images/imobsters-codes-50.png" />iMobsters</a></li>
        <li class="first"><a href="http://NinjasLiveClanCodes.com/"><img src="http://www.NinjasLiveClanCodes.com/images/ninjas-live.png" />Ninjas</a></li>
    </ol>

Edit2: Высота строки позволила мне закрыться в пропасти. Однако кто-нибудь знает способ обойти это?

Answer 1

Похоже, вы обнаружили проблему рендеринга в Firefox. При нажатии на ссылку появляется дополнительный интервал.

Попробуйте установить высоту строки в стиле #nav ol li, чтобы переопределить стандартную высоту строки в списке.

Answer 2

Да, я могу воспроизвести его (Firefox 3.5.7 в Windows 7).

Я не думаю, что проблема в слове. Если вы посмотрите на изображение мировой войны в Firebug, вы увидите, что вы дали ему margin-top из 45 пикселей. Это остается неизменным, но три <li> элемента начинаются на разной высоте.

Может быть, это какая-то странность display: inline-block, я не знаю.

Можете ли вы попробовать удалить все пробелы между тегами <ol> и <li></li> в вашей разметке? Включая разрывы строк, чтобы все символы <ol> находились на одной строке?

Answer 3

Я использую ff 3.6, и кажется, что он работает нормально. Я бы посоветовал вам очистить кеш или перезагрузить страницу, нажав Control + F5.