Я протестировал это в Internet Explorer 7, Firefox 3 и Safari/Гугл Хром. Я определенно вижу проблему с <select> и <input type="file">. Мои результаты показали, что если бы вы ввели все входные данные с одинаковой шириной, то <select> будет примерно на 5 пикселей короче во всех браузерах.
Использование Eric Meyer CSS reset script не помогает в этом, но если вы просто сделаете свои <select> входы на 5 пикселей шире, вы получите очень хорошее (хотя и не идеальное) выравнивание в основных браузерах. Единственным отличием является Safari/Google Chrome, и он, по-видимому, на 1 или 2 пикселя шире, чем у всех других браузеров.
Что касается <input type="file">, то у вас нет большой гибкости при стилизации. Если JavaScript является для вас вариантом, вы можете реализовать метод shown on quirksmode, чтобы добиться большего контроля над стилем управления загрузкой файлов.
См. Мой полный рабочий пример ниже в XHTML 1.0 Строго для типичной формы с согласованной шириной ввода. Обратите внимание, что это не использует трюк 100% ширины, указанный другими здесь, потому что он имеет ту же проблему с непоследовательной шириной. Кроме того, нет таблиц, используемых для визуализации формы, поскольку таблицы должны использоваться только для табличных данных, а не для макета.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Form</title>
<style type="text/css">
label, input, select, textarea {
display: block;
width: 200px;
float: left;
margin-bottom: 1em;
}
select {
width: 205px;
}
label {
text-align: right;
width: 100px;
padding-right: 2em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>User Profile</legend>
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text" />
<br class="clear" />
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text" />
<br class="clear" />
<label for="fav_lang">Favorite Language</label>
<select id="fav_lang" name="fav_lang">
<option value="c#">C#</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
</select>
<br class="clear" />
<label for="bio">Biography</label>
<textarea id="bio" name="bio" cols="14" rows="4"></textarea>
<br class="clear" />
</fieldset>
</form>
</body>
</html>
Почему это считается связанным с программированием? – 2009-05-02 16:06:41
@Jeremy, хотя можно утверждать, что html & css не являются строго «программированием», но это, безусловно, нечто близкое. Это также то, что я бы догадался, что огромное количество людей на этом сайте делает ежедневную часть своей работы. – 2009-10-17 18:07:47
Эта проблема возникает при рендеринге в стандартном режиме, удаляет тег doctype и видит разницу. Проверьте этот вопрос, который решил проблему для меня: http://stackoverflow.com/questions/5627110/doctype-html-width-render-issue-input-element – pauloya 2011-08-29 21:19:25