Последовательно оценивая <textarea> под IE, FF, Safari/Chrome

У меня есть <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%.

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

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

Update

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

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

Ответы

Ответ 1

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

Решение, которое я в конечном итоге принял, состояло в том, чтобы обернуть текстовое поле asp: Text внутри его собственной таблицы и установить свойство "table-layout: fixed; width: 100%" и в текстовом поле /textarea "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>

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

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

Ответ 2

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

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

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

В левой части я нахожу странным. Можете ли вы отправить пример?

Ответ 3

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

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

Ответ 4

Try

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

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

Ответ 5

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