Неравное текстовое поле Html и ширина раскрывающегося списка с XHTML 1.0 strict
Я пытаюсь иметь два входа (одно текстовое поле, одно раскрывающееся меню), чтобы иметь одинаковую ширину. Вы можете установить ширину через CSS, но по какой-то причине поле выбора всегда на несколько пикселей меньше. Кажется, это происходит только со строгим типом документа xhtml 1.0. Любые предложения / идеи по поводу причины / решения?
Имея следующий HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.searchInput{
width: 1000px;
overflow: hidden;
}
</style>
</head>
<body>
<form action = "theAction" method = "post" class = "searchForm" >
<fieldset>
<legend>Search</legend>
<p>
<!--<label for = "name">Product name</label>-->
<input class = "searchInput" type = "text" name = "name" id = "name" value = "" />
</p>
<p>
<!--<label for = "ml2">Product Group</label>-->
<select class = "searchInput" name = "ml2" id = "ml2">
<option value = "158">INDUSTRIAL PRIMERS/FILLERS</option>
<option value = "168">CV CLEAR COATS</option>
<option value = "171">CV PRIMERS/FILLERS</option>
<option value = "" selected = "selected">All</option>
</select>
</p>
<input type = "submit" class = "search" value = "Show" name = "Show" id = "Show" />
<input type = "reset" value = "Reset" name = "reset" id = "reset" class = "reset"/>
</fieldset>
</form>
</body
</html>
Я сам это заметил, и мне будет интересно узнать ответ ...
Что касается браузеров: большинство из них.
Это похоже на дубликат stackoverflow.com/questions/28713/…, у которого есть ответы с несколькими вещами, которые вы можете попробовать.
Ответы 8
Вы правы, разница в 4 пикселя. input имеет ширину 103 пикселей, а select - 99 пикселей. Я понятия не имею, почему это происходит, но вы можете обойти это следующим образом:
<style type = "text/css">
.searchInput {
overflow: hidden;
}
select.searchInput {
width: 101px;
}
input.searchInput {
width: 97px;
}
</style>
Это действительно довольно глупо, и мне было бы очень интересно, если бы кто-нибудь знал, почему это происходит, и способ предотвратить это.
Обход работает в Webkit и Firefox. Разница пикселей в IE другая.
Забавно то, что при использовании доктипа HTML они обычно бывают одинакового размера.
У меня была эта проблема в Firefox 2, но, похоже, она решена в Firefox 3 и IE7.
Мое исправление заключалось в том, чтобы добавить недостающие пиксели к отдельной ширине для select.
Похоже, это происходит только с добавленным типом документа. Поправил пример.
Браузеры, как правило, делают свои собственные вещи в отношении элементов формы и стилей. Стандарт CSS не определяет, как браузеры должны отображать виджеты форм и какие свойства CSS должны позволять пользователям изменять. Он варьируется между браузерами и между разными виджетами форм в одном браузере.
Вы можете попробовать настроить отступы и границы, чтобы разные виджеты формы совпадали.
@ Пол Д. Уэйт - Должен с вами согласиться
CSS предназначен не для этого. Посмотрите, например, на поля ввода в Safari. Они эллиптические. В некоторых случаях свойства CSS просто не применяются.
Обведите элементы, чтобы выровнять их.
То, что он не был указан, не означает, что CSS не предназначен для их стилизации. Несмотря на то, что есть веские аргументы против стилизации ваших элементов для удобства использования (кнопки везде выглядят одинаково), я думаю, что ширина и высота являются важными элементами макета и не создают никаких угроз для удобства использования.
Вы можете попробовать сбросить поля, отступы и границы, чтобы узнать, помогает ли это:
.searchInput {
margin:0;
padding:0;
border-width:1px;
width:1000px;
}
Кажется, это правильный ответ. По умолчанию текстовое поле имеет отступы, и в соответствии с коробчатая модель отступы добавляются к ширине объекта. Чтобы добиться такой же ширины, нужно вычесть отступы из ширины текстового поля.
Похоже, это как-то связано с коробчатой моделью. В частности, это как-то связано с границей. Если вы используете firebug, проверьте вкладку макета ...
При выборе отображается граница 2 пикселя, отступ 0, ширина 996 пикселей и высота 18 пикселей. Входные данные показывают границу 2 пикселя, отступ 1px 0, ширину 1000 пикселей и высоту 16 пикселей.
Если вы установите границу равной нулю (и дадите им цвет фона), вы увидите, что они будут одинакового размера, что показывает их ширину 1000 пикселей на вкладке макета.
.searchInput{
width: 1000px;
border: 0;
background-color: #CCC;
overflow: hidden;
}
Дело в том, что #IE поддерживает Box Model, когда находит "strict" в doctype. Если вы измените его на "традиционный" тип документа, все будет вести себя нормально ... но не в соответствии со стандартом CSS.
В модели CSS Box указано, что в ширину / высоту элемента не включены отступы и границы. Таким образом, они являются дополнительными поверх указанной ширины элемента и, следовательно, больше, чем хотелось бы на самом деле.
Они отображают для меня точно такую же ширину в Firefox 2. Какой браузер вы используете?