Последовательно измеряя <текстовая область> под IE, FF, Safari/Chrome

Question

Последовательно измеряя <текстовая область> под IE, FF, Safari/Chrome

У меня есть a <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 строки долго в обоих случаях, игнорируя height:100 директиву %.

Есть ли последовательный способ измерить a <textarea> через браузеры?

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

Обновление

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

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

10

css cross-browser textarea

задан Eric 4 March 2011 в 17:01

2 ответа

Другие вопросы по тегам:

css cross-browser textarea

Похожие вопросы:

score 0 · Answer 1

Там может быть подлый путь CSS для достижения этого, что я не знаю, но в моем опыте это одно из вещей, где использовать немного JavaScript, оправдан.

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

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

левая подразделение Я нахожу странным, хотя. Вы можете опубликовать пример?

score 1 · Answer 2

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

Решение, которое я в конечном итоге принял, заключалось в том, чтобы поместить asp: Textbox в отдельную таблицу и установить свойство «table-layout: fixed; width: 100%» и в текстовом поле / текстовом поле position: relative; width: 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>

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

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