Запретить расширение ввода текста в IE

Question

У меня проблема с полем ввода в IE. Код предназначен для портлета, а ширина должна быть динамической, поскольку пользователь может разместить портлет в любом из трех столбцов на странице, каждый из которых имеет разную ширину. Как всегда, он отлично работает в FF, но не в IE. Для того, чтобы сделать ширину dyanaic, я установил width = "100%". Данные для заполнения ввода текста поступают из БД. Когда страница отображается при наличии длинного URL-адреса, текстовый ввод расширяется, чтобы заполнить содержимое в IE, но в FF он просто остается той же ширины (т. Е. 100% от TD, в котором он живет). Как я могу остановить IE от изменения ширины, чтобы соответствовать содержанию. Установка фиксированной ширины в 100px устраняет проблему, но мне нужно иметь ширину в процентах, чтобы разместить макет портлета, где бы он ни находился на странице.

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

<td class="right" >
    <input type="text" class="validate[custom[url]]" value="" id="linkText" name="communicationLink"  maxlength="500" maxsize="100" />
</td>

    .ofCommunicationsAdmin input {
    font-family: "Trebuchet MS";
    font-size: 11px;
    font-weight:normal;
    color:#333333;
    overflow:hidden;
    }



   .ofCommunicationsAdmin #linkText { 
    overflow:hidden; 
    width:100%; 
    border:1px 
    #cccccc solid; 
    background:#F4F7ED 
    top repeat-x;
    }

.ofCommunicationsAdmin td.right {
   vertical-align: top;   
   text-align: left;   
}

Answer 1

Я немного опоздал на эту вечеринку, но сам столкнулся с этой проблемой.

Если я правильно понимаю проблему, ваша разметка выглядит примерно так:

<table>
  <tr>
    <td>Whatever</td>
    <td><input /></td>
  </tr>
</table>

Таким образом, вход находится в таблице. Кроме того, в вашем CSS вы настраиваете ввод для ширины в процентах. Однако, когда вы вводите столько текста во входные данные, что он расширяется за пределы видимой ширины, таблица расширяется, чтобы соответствовать контейнеру.

Это действительно легко исправить, но настолько случайно, что для этого нет большой помощи. Решение состоит в том, чтобы добавить это в ваш CSS (я добавил его в свой reset.css).

table {
  table-layout: fixed;
}

Вы можете сделать его специфичным для IE, если хотите, но он не делает ничего плохого для других браузеров (что я заметил).

Answer 2

Я пробовал переполнение: скрытый и перенос по словам: break-word

Да, они не будут делать ничего полезного для входа.

Чтобы сделать ширину динамической, я установил width = "100%"

Это должно сработать, но родительская таблица должна быть ограничена шириной, а table-layout: fixed в противном случае в игру вступает алгоритм auto-size-table с автоматическим определением размеров, который сложен, немного сломан и, вероятно, не буду делать то, что вы хотите.

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

<table class="form">
    <col class="label" /><col class="input" />
    <tr>
        <td><label for="foo">Foo</label></td>
        <td><input type="text" name="foo" id="foo" value="bar" /></td>
    </tr>
</table>

table.form { table-layout: fixed; width: 100%; }
col.label { width: 6em; }   /* let col.input have the rest of the width */
table.form input, table.form textarea, table.form select {
    width: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

Answer 3

Что сработало для меня: INPUT {overflow-x:hidden; }