Почему мое изображение слишком далеко по левому краю в Firefox против Chrome

Question

У меня есть этот код, который ведет себя по-разному в Firefox и Chrome.

<h2>Presenting 
<span style="font-weight:bold">Analytics by </span> 
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>

класс fi_logo, на который ссылаются выше:

.fi_logo {
    min-width: 35px;
    height: 35px;
    margin-left: 40px;  
    position: absolute;
    top:-5px;
    left: 262px;
    float:right;
}

В Firefox есть смещение, вызванноена полях слева в fi_logo между изображением и текстом (в h2).Если я не добавляю поле слева, то изображение накладывается на текст в Chrome.

Короче говоря, если я добавлю свойство margin-left, оно будет работать в Chrome, тогда как в Firefox оно вызывает большое смещение.Любые предложения о том, как решить эту проблему?

Answer 1

Ваш HTML-код недействителен. Вы не можете иметь div внутри заголовка. Я также подвергаю сомнению плавание и абсолютное позиционирование на одном и том же элементе. Мне также интересно, если вы используете doctype.

Answer 2

Вот оно: http://jsfiddle.net/bikerabhinav/mpL79/2/ Используйте комбинацию положения относительного и абсолютного. Также не используйте div внутри h2 - плохая разметка

Answer 3

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

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

Кажется ужасно запутанным, чтобы позиционировать img абсолютно, плавать его и добавлять левое поле. Учитывая все это, неясно, что именно вы пытаетесь сделать с помощью этого кода.

Если вы отредактируете свой вопрос, чтобы описать, как вы хотите расположить изображение, я (или кто-то еще) был бы более чем рад рекомендовать хороший подход

Answer 4

Я думаю, ваша проблема связана с конкретной версией браузера. Я проверил это в FF 3.6.2, которая возвращает тот же результат, что и Chrome

Answer 5

Ваш тег изображения внутри div не закрыт должным образом, а в css определение класса неверно;класс определяется точкой (.);

Answer 6

Может быть, если вы установите .fi_logo display: block