Почему CSS не применяется к текстовым полям в IE?

#css

#css

Вопрос:

Следующий CSS работает в FF, но не в IE.

 select,input[type=text] {
    width:200px;
    height: 20px;
}
  

Комментарии:

1. Зависит от версии IE.

Ответ №1:

используете ли вы IE6?? поскольку IE6 не поддерживает селекторы атрибутов (input[type=text]), вам следует использовать класс для их стилизации.

попробуйте это: F12, (для отображения инструмента разработчика) и режим документа?

Возможно, ваша страница имеет допустимый DTD, но содержит так много ошибок, что IE8 и 9 возвращаются в режим совместимости (эмулируют IE7). Смотрите вкладку Дополнительно в параметрах обозревателя — «Восстановление после ошибок рендеринга с помощью представления совместимости»

Комментарии:

1. <тип ввода =»text» идентификатор=»EndDateInputBox» значение=»» отключено =»disabled»> <img height=»16″ width=»16″ border =»0″ onclick=»возвращает showCalendar(‘EndDateInputBox’, ‘гггг-мм-дд’); » src=»/files/404048/93125/ Calendar.png»></td>

2. вы должны закрыть ввод, попробуйте добавить тире в конце. Используйте какой-нибудь html-валидатор, чтобы исправить все ошибки html, как я упоминал в ответе, если у вас есть ошибки html, IE будет работать как IE7 и не поддерживает селекторы атрибутов. 🙂

3. Я вставил этот CSS в новый документ с простой формой, и он работал в IE 7,8 и 9. Я подозреваю, что либо какое-то другое правило все портит, либо, как предполагает Джейро, страница переводится в режим quirks.

Ответ №2:

Совместимость с CSS-селектором:

Возможно, вы захотите взглянуть на таблицу совместимости css-селекторов. Вы также можете провести тест css селекторов онлайн.

Вот еще одна диаграмма совместимости.

Поддержка браузера:

IE 6 поддерживает не так много. Я не знаю вашу аудиторию, но, возможно, нет необходимости поддерживать IE 6?

Если вы не настолько хорошо знаете свою целевую аудиторию, возможно, вам захочется взглянуть на statcounter: доля рынка IE 6 по всему миру составляет около 2,5%.

Google прекратил поддержку IE 6.

Как это исправить:

  • Вы могли бы исправить это с помощью JavaScript (пример: статья о jQuery, еще одна)
  • Прекратите поддержку IE 6
  • Используйте классы / идентификаторы для выбора

Комментарии:

1. Я исправил это с помощью класса. Спасибо всем.

Ответ №3:

IE не может использовать псевдоклассы, подобные этому. Какую версию IE вы используете? редактировать: Извините, я имею в виду селекторы атрибутов, как уже сказал Джейро.