CSS: как установить ширину управления формой, таким образом, у них всех есть та же ширина?
Рассмотрите следующий пример:
На браузере, которые поддерживают border-box калибровка поля, это представляется, как я хочу:
Корректный рендеринг http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png
На IE 6/7, однако, это представляется как:
IE 6/7 рендеринг http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png
Как я могу получить тот же рендеринг в IE 6/7, что я вхожу в другие браузеры, не обращаясь к установке размеров в пикселях?
4 ответа
Это невозможно с CSS. Я провел небольшое исследование и обнаружил, что тот же вопрос задавался до здесь . Решение состоит в том, чтобы использовать этот файл boxsizing.htc и добавить следующую строку в заголовок HTML:
<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->
Быстрое исправление может быть в браузере IE6 / 7 - взломать его с помощью чего-то вроде select {* width : 102,5%; _width: 102,5%; } хотя он может не совпадать с пикселем, если он слишком широкий.
Решение состоит в том, чтобы использовать CSS и JavaScript для замены элементов управления формы, которые поставщики браузеров сговорились сделать для стилизации. Выбор - это просто раскрывающееся меню с событием onmouseup. Текстовые редакторы на основе JS (богатые и простые), которые могут заменить текстовое поле, изобилующее в Интернете. Для этого есть даже библиотеки. ( Пример )
Возможно, это может вам помочь: Поддержка CSS3 для Internet Explorer 6, 7 и 8 . Со страницы:
IE-CSS3 - это сценарий для предоставления Internet Explorer поддерживает несколько популярных новых стилей, доступных в грядущий стандарт CSS3.