CSS: как установить ширину элемента управления формы, чтобы они все имели одинаковую ширину? - PullRequest
Новая
       24

CSS: как установить ширину элемента управления формы, чтобы они все имели одинаковую ширину?

6 голосов
/ 22 мая 2010

Рассмотрим следующий пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            div { width: 15em }
            input, textarea, select { width: 100%;
                -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
        </style>
    </head>
    <body>
        <form>
            <div>
                <input value="Input">
            </div>
            <div>
                <textarea>Text area</textarea>
            </div>
            <div>
                <select>
                    <option>One</option>
                    <option>Two</option>
                    <option>Three</option>
                </select>
            </div>
        </form>
    </body>
</html>

В браузере, поддерживающем размер поля 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 ]

2 голосов
/ 22 мая 2010

Решение состоит в том, чтобы использовать CSS и JavaScript для замены элементов управления формой, которые разработчики браузеров сговорили, чтобы сделать боль в стиле. Выбор - это просто выпадающее меню с событием onmouseup. Текстовые редакторы на основе JS (богатые и простые), которые могут заменить текстовую область в изобилии онлайн. Есть даже библиотеки только для этой цели. ( Пример )

1 голос
/ 22 мая 2010

Быстрое исправление может быть в браузере IE6 / 7 - взломайте его чем-то вроде select { *width:102.5%; _width:102.5%; }, хотя это может не совпадать с пикселем, если оно слишком широкое.

1 голос
/ 22 мая 2010

Это невозможно с CSS. Я провел некоторое исследование и обнаружил, что тот же вопрос был задан до здесь . Решение состоит в том, чтобы использовать этот boxsizing.htc файл и добавить следующую строку в HTML-заголовок: 

<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->
0 голосов
/ 22 мая 2010

Может быть, это может вам помочь: Поддержка CSS3 для Internet Explorer 6, 7 и 8 . Со страницы:

IE-CSS3 - это скрипт для предоставления Internet Explorer поддерживает несколько из популярных новых стилей, доступных в будущий стандарт CSS3.

...