css проблемы с оперой, когда IMG установлен для отображения: блок

Question

Проверьте это jsfiddle .

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

Конечно, плавание это решит, но это создает больше проблем с изображением (код, который я не включил).

Еще одно решение - не устанавливать #mainImg на display:block; но это также создает некоторые проблемы высоты / ширины.

Итак, вопрос в том, есть ли лучшее решение для этого? И почему Opera отображает его иначе, чем другие браузеры, что вызывает это?

Answer 1

Opera каким-то образом расширяет родительский блок изображения из-за плавающего рядом с ним. Это, безусловно, требует более тщательного расследования, но в качестве быстрого решения вы можете:

• добавить overflow:hidden в .to_thirds блок: http://jsfiddle.net/js5Pk/1/
• или добавить display:inline-block; vertical-align:top; к нему: http://jsfiddle.net/js5Pk/2/

Смысл в том, чтобы очистить контекст потока для этого блока, чтобы в него не помещался правильный float.