Постоянный размер <textarea>под IE, FF, Safari / Chrome

Question

У меня есть <textarea>, который должен уместиться в пространство, размер которого не определен заранее (это процент от размера экрана). Я могу получить хорошие результаты, если FireFox установив обычные свойства CSS:

#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }

Однако в IE 6 и 7 я получаю разные, странные результаты. В IE6 текстовое поле, кажется, имеет отступы слева и справа, увеличивая размер моего контейнера. В IE7 текстовое поле имеет отступ слева, но не увеличивает размер контейнера - вместо этого его правый край выдвигается за пределы контейнера.

Настройка высоты, похоже, не влияет ни на IE6, ни на IE7; <textarea> имеет длину 2 строки в обоих случаях, игнорируя высоту: директива 100%.

Существует ли согласованный способ определения размера <textarea> в разных браузерах?

Есть ли способ избавиться от отступов слева от <textarea>?

---

Обновление

Использование position:absolute удаляет заполнение, но width:100% все еще облажался. IE7, по-видимому, рассчитывает, что ширина 100% слишком велика, в результате чего <textarea> выпадает из <div>, который ее содержит.

Я создам отдельный пример, если у меня будет шанс ...

Answer 1

Я видел эту проблему с элементами управления текстовым полем ASP.Net также в IE7. Я не мог вспомнить, где я нашел решение (но обращался к человеку, который его нашел), но у меня возникла та же проблема, когда текстовое поле с шириной = "100%" фактически сломало бы DOM, а весь мой раздел контента - " пролить "на соседний раздел (например, на основе таблицы навигации).

Решение, которое я в конечном итоге принял, заключалось в том, чтобы заключить asp: Textbox в собственную таблицу и установить свойство «table-layout: fixed; width: 100%» и положение textbox / textarea: относительный; ширина: 100% ;» поэтому блок будет выглядеть так:

<table style="width: 100%; table-layout: fixed;">
  <tbody>
    <tr>
     <td>
      <asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
     </td>
    </tr>
   </tbody>
 </table>

Это не самое красивое решение, но я убедился, что оно работает во всех браузерах. У меня есть рецензия на этот вопрос ЗДЕСЬ .

Надеюсь, это помогло.

Answer 2

Попробуйте добавить display:block и border:0 к вашему #text_area. Первый должен позаботиться о проблеме высоты, а второй предотвращает переполнение width:100%.

Answer 3

Попробуйте

добавление минимальной высоты: 100% к текстовой области css. На div, содержащем абсолютное позиционирование, установите относительное положение на вашем CSS.

также используйте переходные Doctypes вместо строгих, в то время как вы на это. Убедитесь, что нет открытых тегов. Было бы лучше, если бы вы могли сделать страницу совместимой со стандартом XHTML или HTML, чтобы у вас было меньше проблем с кросс-браузерной совместимостью.

Answer 4

Чтобы решить подобные проблемы, нужно подумать о том, как обрабатывается процент в браузере. Прежде всего .... проценты не существуют, они в какой-то момент преобразуются в пиксели. Шаги: 1) браузер отображает все теги, 2) браузер измеряет внешние, родительские блоки в процентах, чтобы получить его размер в пикселях, и устанавливает размер дочерних блоков в соответствии с их процентным размером. Я думаю, первое, что нужно проверить, это размер родительского блока textarea, его родительского блока и так далее. Это можно сделать, проверив информацию «Макет» в Firebug и IE Developer Toolbar, и выяснить, что измеряется по-разному в обоих браузерах. Как только вы обнаружите, что элемент (или элементы) css можно настроить, чтобы они учитывались.

Имейте в виду, что размер в процентах учитывает ширину и высоту содержимого родительского блока для определения размера дочернего элемента, а не заполнения. Таким образом, если ширина родительского блока равна 500px и имеет отступ 100px, дочерний элемент с шириной 100% будет 500px, а отступ вокруг 100px будет вокруг него, и оба элемента будут занимать 700px экрана.

Answer 5

Может быть хитрый CSS-способ достижения этого, о котором я не знаю, но по моему опыту это одна из тех вещей, где использование Javascript немного оправдано.

Вы можете получить нужную высоту (текущего окна, которое я предполагаю), используя JQuery или Prototype, или в чистом Javascript: Получите высоту текущего документа , а затем

document.getElementById("text_area").style.height = calculated_height+"px";

Левая подушка мне кажется странной. Вы можете опубликовать пример?