textarea со 100% шириной игнорирует ширину родительского элемента в IE7

Question

У меня есть следующая текстовая область в таблице:

<table width="300"><tr><td>

<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>

</td></tr></table>

С длинной строкой в ​​текстовой области текстовая область растягивается, чтобы разместить ее в одной строке в IE7, но сохраняет ширину 300 пикселей в других браузерах.

Есть идеи, как это исправить в IE?

Answer 1

Примените ширину к td, а не к table.

РЕДАКТИРОВАТЬ: @Emmett - ширину можно так же легко применить с помощью CSS.

td {
    width: 300px;
}

дает желаемый результат. Или, если вы используете jQuery, вы можете добавить ширину через скрипт:

$('textarea[width=100%]').parent('td').css('width', '300px');

Суть в том, что существует несколько способов применить ширину к ячейке таблицы, если ограничения разработки не позволяют вам применять ее напрямую.

Answer 2

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

<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>

Answer 3

@ Питер Мейер , Джим Роберт

Я пробовал разные значения переполнения, но безрезультатно.

Эксперименты с различными значениями атрибута wrap и стиля word-wrap также оказались бесполезными.

EDIT:

@ dansays , seanb

Из-за некоторых неуклюжих ограничений, специфичных для приложения, ширина может применяться только к таблице.

@ Трэвис

Setting style = "word-break: break-all;" вроде работал! В IE7 и FF он все еще выглядит по-разному. Я приму этот ответ, если ничего лучше не придет.

Answer 4

Еще один очень хакерский вариант, если вы застряли с множеством ограничений, но знаете, как будет выглядеть окружающий дом:

style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"  

не очень, но работает в IE7.
Использование jquery или подобного было бы намного более точным решением, но это зависит от других имеющихся у вас ограничений.

Answer 5

Дайте ширину в пикселях. Это должно работать правильно

Answer 6

Для решения этой проблемы вы используете пробел в вашем тексте, и вы тоже используете этот код

overflow:hidden

Answer 7

Я сталкивался с этой проблемой раньше. Это связано с тем, как HTML анализирует ширину таблицы и ячейки.

Вы можете установить 300 в качестве ширины, если содержимое элемента никогда не может превысить это значение (установка div с определенной шириной внутри и правилом переполнения - мой любимый способ).

Но при отсутствии решения, подобного описанному выше, в тот момент, когда ЛЮБОЙ элемент выталкивает вас за эту ширину, все ставки выключены. Элемент становится настолько широким, насколько это необходимо для размещения содержимого.

Дополнительный совет - заключите ваши значения ширины в любой набор кавычек, чтобы правильно вложить значение (<table width='300'). Если кто-то придет и изменит его на%, он будет игнорировать%, в противном случае.

К сожалению, у вас всегда будут проблемы с разбивкой строк, которые не имеют «естественных» разрывов в IE, если вы не можете сделать что-то, чтобы разбить их с помощью кода.

Answer 8

Свойство переполнения - путь. В частности, если вы хотите, чтобы дополнительный текст игнорировался, вы можете использовать «overflow: hidden» в качестве свойства css для текста.

Как правило, когда в браузере есть неразрывный объект, например длинная строка без пробелов, он может конфликтовать с различными ограничениями размера - ограничения строки (long) и его контейнера (short). Если вы видите различное поведение в разных браузерах, они просто разрешают этот конфликт по-разному.

Кстати, для длинных строк есть хороший трюк - тег . Если ваш браузер видит longstringlongstring, то он попытается разместить его в контейнере как одну непрерывную строку - но если он не сможет соответствовать, он разбьет эту строку пополам в wbr. По сути, это точка останова с неявным запросом не прерываться там, если это возможно (вроде как дефис в печатных текстах). Кстати, в некоторых версиях Safari и Opera это немного глючит - за дополнительной информацией обращайтесь к этой странице причудливого режима .

Answer 9

Лучшая вещь, которую я мог найти, чтобы заставить ее работать, немного хакерская:
обернуть текстовой области <div style="width:300px; overflow:auto;"> может поиграть со значением переполнения

Answer 10

IE также поддерживает свойство word-break CSS 3.