Почему Chrome, Firefox и IE все равно обрабатывают элементы управления SELECT с фиксированной шириной?

Я теряю волосы на этом... кажется, что, когда я фиксирую ширину элемента управления HTML SELECT, он делает свою ширину по-разному в зависимости от браузера.

Любая идея, как стандартизировать это без необходимости обращения к нескольким таблицам стилей?

Вот что я работаю с:

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

Это мой тип документа для страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ответ 1

Элементы управления формой всегда будут менее послушны попыткам стилизации, в частности выборам и входам файлов, поэтому единственный способ надежно нарисовать их в кросс-браузере и с учетом будущего соответствия - заменить их JavaScript или Flash и имитировать их функциональность

Ответ 2

Попробуйте установить font-size на выбор, а также повлиять на то, как они отображаются. Также рассмотрим свойства min-width и max-width.

Ответ 3

входной [тип = текст], Выбрать { border: solid 1px # c2c1c1; ширина: 150 пикселей; padding: 2px; }

//то

выберите { ширина: 156 пикселей;//нужно вводить [type = text] width + (border и padding) }

/* Вход [type = text] width = width + padding + border

Ширина выбора просто равна ширине. Отступ и граница получаются внутри этого ограничения ширины. Это как раз так, как SELECT выполняет...

Ответ 4

Удостоверьтесь, что вы удаляете все поля по умолчанию и отступы и четко определяете их. Убедитесь, что вы используете правильный DOCTYPE и, следовательно, отображаете IE в режиме стандартов.

Ответ 5

Вы можете использовать поддельный виджет выпадающего списка и заменить SELECT.

Ответ 6

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

Эрик Мейер написал хорошую статью на эту тему:

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

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

Ответ 7

Попробуйте использовать Firebug или функцию Chrome Inspect Element (щелкните правой кнопкой мыши на элементе управления select, нажмите "проверить элемент" ), чтобы точно увидеть какие свойства стиля наследуются/отображаются для этого конкретного объекта. Это должно привести вас в правильном направлении.

Ответ 8

Я пробовал все эти предложения... и, наконец, я получил его, чтобы он выглядел хорошо в IE и Firefox. Похоже, что что-то не так с надписью на элементе управления SELECT. Если я увеличиваю ширину SELECT на 2 пикселя, теперь размер будет правильным.

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

Однако Chrome по-прежнему не показывает их одинакового размера.

Ответ 9

Мартинатор правильный.

Похоже, вы пытаетесь контролировать ширину различных типов входов или меню в баузерах. Вы можете напрямую выбрать объект и указать ширину. Например:

select {
  width:350px;
}

Или вы можете сделать это с помощью текстовой области:

select {
      width:350px;
}

Другие типы входов требуют упоминания о синтаксисе Martinator. Таким образом, для ввода текста, ввода или даже ввода типа файла вы сделаете это для каждого из них:

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}