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

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

10 голосов
/ 25 сентября 2008

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

Ответы [ 9 ]

4 голосов
/ 25 сентября 2008

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

3 голосов
/ 26 сентября 2008

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

2 голосов
/ 21 февраля 2011

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

// затем

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

/ * Ввод [тип = текст] ширина = ширина + отступ + рамка

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

* /

1 голос
/ 25 ноября 2008

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

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

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

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

1 голос
/ 25 сентября 2008

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

1 голос
/ 25 сентября 2008

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

0 голосов
/ 26 апреля 2012

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

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

select {
  width:350px;
}

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

select {
      width:350px;
}

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

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

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

input[type=file] {
      width:350px;
}
0 голосов
/ 26 сентября 2008

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

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

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

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

0 голосов
/ 25 сентября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...