Question

我在IE中输入字段有问题。代码用于portlet，宽度需要是动态的，因为用户可以将portlet放在页面中具有不同宽度的三列中的任何一列上。一如既往，它在FF中工作正常但在IE中却不行。为了使宽度dyanaic我设置宽度=“100％”。填充文本输入的数据来自DB。当呈现页面时，如果存在长URL，则文本输入扩展以填充IE中的内容，但是在FF中它仅保持相同的宽度（即它所存在的TD的100％）。如何阻止IE更改宽度以适应内容。将宽度设置为100px的固定宽度可以解决问题，但我需要将宽度设置为百分比，以便适应portlet在页面上放置的布局。

我尝试过overflow：hidden和自动换行：break-word但是我无法工作。这是我的输入代码和样式表

<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

我尝试过overflow：hidden和自动换行：break-word

是的，他们不会对输入做任何有用的事情。

为了使宽度为dyanaic，我设置了width =“100％”

这应该有效，但是父表需要被约束到宽度table-layout: fixed，否则auto-table-sizing算法会起作用，这很复杂，有点破碎，可能不会做你想要什么。

这是我如何布置液体形式的一个例子。请注意使用box-sizing hack来使不同类型控件的边缘在支持它的浏览器中完全排列（不是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; }

在IE中阻止文本输入扩展

3 个答案: