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

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

<!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 коробки, это отображается как я хочу:

Correct rendering http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

В IE 6/7, однако, это оказывается как:

IE 6/7 rendering http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

Как я могу получить тот же рендеринг в IE 6/7, который я получаю в других браузерах, не прибегая к настройке размеров в пикселях?

источник

2010-05-22 avernet

Помните, если я предлагаю перекрестно разместить этот вопрос на http://doctype.com/? –

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

<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->

источник

2010-05-22 01:34:24 BalusC

Возможно, это может вам помочь: CSS3 support for Internet Explorer 6, 7, and 8. На странице:

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

источник

2010-05-22 00:36:58 eKek0

К сожалению, этот 'htc' не включает поддержку' box-sizing'. – BalusC

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

источник

2010-05-22 00:57:32 mVChr

Проблема с этим заключается в том, что он блокирует вас до заданного размера шрифта. Предположим, я добавляю 'select {* width: 102.5%}'. Совершенно, теперь поля формы имеют одинаковую ширину: http://img.skitch.com/20100522-ght27dws54jqp8r79bf5nf1hus.png. Но теперь добавьте 'body {font-size: 200%}'. С помощью той же 'select {* width: 102.5%}' вы получите: http://img.skitch.com/20100522-ksie3bm45e83g314869fdhby29.png. Таким образом, процент, который вы указали в 'select {* width: 102.5%}', будет зависеть от размера шрифта. По мере изменения размера шрифта вам нужно будет изменить этот процент. Вместо этого я бы предпочел идти с шириной в пикселях. – avernet

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

источник

2010-05-22 02:03:22 reisio

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

ответ

Смежные вопросы