Я нахожусь в середине кривой обучения HTML5 / CSS / JavaScript и столкнулся со стеной.
Моя цель - создать форму.Выполняя эту, казалось бы, простую задачу, я создал странное чудовище, которое прекрасно отображается в Firefox и IE, но в Chrome и Safari выглядит беспорядочно.Я написал пример кода, который иллюстрирует мою проблему.Рассмотрим эту трехстрочную форму, в которой есть два текстовых поля для имени пользователя и пароля, а также флажок, указывающий, должна ли тема «Сэнфорд и сын» воспроизводиться во время сеанса пользователя.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Попробуйте просмотреть его в IE или Firefox, и все выглядит отлично.Теперь попробуйте просмотреть его в Chrome или Safari.Флажок «sanford» появляется под его меткой.Нехорошо.Этот флажок, очевидно, должен появиться справа от метки.Еще большее недоумение вызывает то, что если я заменю флажок на какой-либо другой ввод (например, текст, радио и т. Д.), Все будет отображаться правильно во всех браузерах.Эта проблема, кажется, ограничена флажком.
Я не могу обернуть голову вокруг того, что здесь происходит.Метка «Sanford» смещена влево, так что, предположительно, флажок должен располагаться непосредственно справа от этой метки - и на самом деле это именно то, что происходит в Firefox / IE… так почему бы не в Chrome / Safari?
Любая помощь будет принята с благодарностью.
РЕДАКТИРОВАТЬ: я отправил код на сайт Fiddle в соответствии с просьбой: http://jsfiddle.net/ChadDecker/FyNZw/