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

StackOverflow https://stackoverflow.com/questions/135076

  •  02-07-2019
  •  | 
  •  

Вопрос

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

Решение

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

Другие советы

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

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

// затем

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

/* Вход [type = text] width = ширина + накладка + граница

Ширина выбора просто равна ширине.Отступы и границы отображаются внутри этого ограничения ширины.Именно так работает SELECT...

*/

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

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

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

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

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

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

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

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

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

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

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

Мартинатор прав.

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

select {
  width:350px;
}

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

select {
      width:350px;
}

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

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

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

input[type=file] {
      width:350px;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top