Проблемы в IE7 с float:right

[AlOshka]

Здравствуйте!

Встала проблема с 7м осликом..

Уже не первый раз сталкиваюсь с таким моментом.

Есть простой код:

<div class="caption">
   Отзывы <a href="#">Все (232)</a>
</div>

со стилями:

.caption {
    color: #0B0B0B;
    font: 18px/22px Arial,Tahoma,Verdana,sans-serif;
    height: 26px;
}
a {
    float: right;
    font: 14px/18px Arial,Tahoma,Verdana;
}

Так вот, везде всё нормально:

кроме ie7 (синим выделен контейнер .caption в "средствах разработчика"):

Просьба, помогите разобраться! Сталкиваюсь с таким далеко не впервые, побороть так и не смог. Приходилось для ослика отказываться от float'a. Может это типовая проблема? Может у неё уже давно есть решение, а я ещё в каменном веке? :-)

Спасибо!

[ablay2009]

Немного не понял в чем проблема, но попробуйте после ссылки вставить пустой див с clear:both

<div style="clear:both"> </div>

Edited February 27, 2012 by ablay2009

[AlOshka]

Немного не понял в чем проблема

Проблема в том, что ссылка с float:right в ie7 визуально уехала под родительский блок:

Если float не указывать, то ссылка уже визуально окажется в родительском контейнере, но (естественно) не там где надо..

В остальных браузерах всё нормально (самый 1й скриншот 1го поста).

<div style="clear:both"> </div>

не помогло.

Возвращение в поток делает родительский блок выше на высоту ссылки, но саму ссылку на место не возвращает.

Т.е. если .caption'у задать overflow:hidden и убрать фиксированную высоту:

.caption {
    color: #0B0B0B;
    font: 18px/22px Arial,Tahoma,Verdana,sans-serif;
    overflow:hidden;
}

то этот блок просто растянется в высоту, а ссылка всё-равно будет ниже базовой линии :-(

Я уже position:relative и zoom'ами как только не игрался, а эффекта ноль.

Edited February 27, 2012 by AlOshka

[Switch74]

попробуй ссылку писать перед текстом

[AlOshka]

попробуй ссылку писать перед текстом

Сработало! Вот уж не думал..

Спасибо большое! :-)

А, если не секрет, в чём причина такого поведения?

[ablay2009]

Это поведение, когда только начинаешь верстать, полностью убивать желание использовать флоаты. Дело в том, что положение блока при плавающей верстке, зависит от того, где вы его "напишите". И при этом возникают проблемы, когда надо, к примеру, расположить контент выше сайдбара(из соображений СЕО), но с данной версткой никак не получается расположить блоки как надо.

Edited February 27, 2012 by ablay2009

[AlOshka]

зависит от того, где вы его "напишите"

это естесственно :-)

Но по всем законам жанра плавающий блок на то и плавающий, чтобы его по правому краю обтекало..

Ведь по логике, весь простой текст внутри .caption (не обёрнутый ни во что) - инлайновый элемент, как и ссылка, стоящая внутри этого текста. Он не занимает всю свободную ширину, чтобы ссылка с float:right начала обтекать его _после_, а не _до_. Все браузеры это понимают, а ie и здесь отличился :-)

Ещё раз спасибо!