Я совершил кардинальную ошибку, не отладив ВСЕ браузеры при разработке своего сайта. В 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, но это неприемлемо. Могу ли я что-нибудь сделать для получения желаемых результатов?