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

Я выпадение волос на этом ... кажется, что когда я фиксирую ширину элемента управления 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">
10
cross-browser html

9 ответов

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

3

попробуйте font-size на выбор, а также, что может повлиять на то, как они оказаны. Также рассмотрим!--1--> и max-width свойства.

4

ввод[type=text], выбирать { граница: твердое тело 1px #c2c1c1; ширина: 150 пикселей; обивка: 2 пикселя; }

// тут

выберите { ширина: 156px;/ / необходимо ввести [type=text] width + (граница и заполнение) }

/* Входной сигнал [type=text] width = width + padding + border

ширина выбора просто равна ширине. Заполнение и граница отображаются внутри этого ограничения ширины. Это просто способ выбрать вальцы...

*/

2

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

1

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

1

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

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

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

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

1

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

0

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

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

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

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

0

Martinator правильно.

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

select {
  width:350px;
}

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

select {
      width:350px;
}

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

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

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

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