Позиция: Абсолютная внутренняя позиция: Относительно в Chrome

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

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

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;
}

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

9
задан Stephan Muller 20 September 2014 в 13:53
поделиться