Положение: абсолютное положение

Question

Я сделал кардинальную ошибку - не отлаживал все браузеры во время разработки своего сайта. В Firefox (3.6.10) и IE8 элементы формы отображаются нормально, но в chrome (10) отображается только позиция: абсолютные элементы.

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

HTML:

<form><ul>
    <li>
        <label>Name</label>
        <input type="text" />
        <a id="nameGenerator" class="widget"></a>
    </li>
</ul></form>

CSS:

form ul li{
    margin: 5px;
    clear: both;
    position:relative;
}
form label{
    float:left;
    margin-top: 0px;
    margin-bottom: 0px;
}
form input{
    float:right;
    margin-top: 0px;
    margin-bottom: 0px;
}
form .widget{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}

Я могу «исправить» это, убрав позицию: относительная, но это недопустимо. Могу ли я что-нибудь сделать для достижения желаемых результатов?

Answer 1

Добавьте это к вашему css:

form ul li{
    overflow:auto;
}

http://jsfiddle.net/cTTVs/1/

Answer 2

Просто добавьте overflow:hidden к form ul li правилам. Это работает лучше, чем overflow:auto при очистке значений с плавающей запятой во многих ситуациях, когда в элементе могут появляться полосы прокрутки (возможно, такие как «виджеты»).

Обновление:

Мне показалось, что если вашему виджету нужно показать список таких вещей, как поле для предложений или средство выбора даты, вам лучше НЕ использовать значения overflow для очистки ваших поплавков. Альтернативой является старый хак с открытым кодом , который может быть более подходящим. Посмотрите демонстрационную версию , в которой есть искусственный виджет, показывающий различные решения и как с ними может работать высокий виджет.

Демонстрация: jsfiddle.net / Marcel / ghaHz

Answer 3

Добавьте overflow:visible и это решит вашу проблему.