Почему входы и выборки используют разные модели блоков? - PullRequest
Новая
       30

Почему входы и выборки используют разные модели блоков?

7 голосов
/ 15 июля 2010

Похоже (по крайней мере в IE 8 и Firefox 3), что для элементов ширина относится к контенту, а для

В чем дело? Я бы подумал, что оба являются встроенными заменяемыми элементами и будут вести себя одинаково. Соответствует ли это поведение стандартам W3C? Работает ли так во всех основных браузерах?

Ответы [ 4 ]

2 голосов
/ 28 января 2012

Я использовал это на CSS, работа отлично: 

input, select
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

При этом вы заставляете поведение входов и выбираете одинаковые.

2 голосов
/ 01 сентября 2011

Выбор размера отличается от входного размера из-за разного размера блока. Для входных данных в качестве размера блока установлено значение «content-box», а в параметре select для размера блока установлено значение «border-box». В приведенном ниже примере ввод будет шире, чем выбор: 

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" />
<select name="b" style="width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select>

это потому, что полной шириной для ввода будет ширина + отступ (влево + вправо) + граница (влево + вправо), а для выбранной полной ширины будет только ширина (но вы это знаете). Чтобы оба элемента вели себя одинаково, вы должны изменить модель размеров блока. В приведенном ниже примере input и select будут иметь одинаковую ширину *: 

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" />
<select name="b" style="box-sizing: content-box; width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select>

* используйте -moz-box-sizing для firefox

Как я знаю, это поведение согласованно во всех современных браузерах (включая iE6), но я не знаю, почему это работает именно так. Не знаю ни одной спецификации W3, где описывается это конкретное поведение. Есть примечание , предлагающее стиль по умолчанию , но оно охватывает только простые атрибуты - поэтому сброс css по умолчанию так популярен.

0 голосов
/ 16 июля 2010

Как правило, рекомендуется «сбрасывать» базовые стили всех элементов управления и других общих элементов (таких как html, body и т. Д.) До общего минимума. Хотя не гарантируется создание абсолютно совпадающих элементов управления во всех браузерах, это делает вас намного ближе. Существует множество готовых CSS для сброса настроек, которые вы можете просто использовать вне Интернета. Одним из наиболее распространенных является сброс css YUI:

После сброса CSS, чтобы устранить расхождение по ширине, вам просто нужно будет установить стандартную границу по умолчанию и отступы для элементов управления вводом, которые должным образом соответствуют стилю ваших сайтов.

0 голосов
/ 16 июля 2010

Браузеры были еще до W3C, поэтому они определили свои собственные правила рендеринга.Браузеры никогда не будут согласованы (в ближайшем будущем) в отношении стиля элемента управления формы, потому что стили браузера по умолчанию несовместимы, а элементы управления формы отображаются различными ОС.

На этом сайте перечислены стили браузера по умолчанию: http://www.iecss.com/ (стиль входных данных несовместим)

...