防止文本输入在 IE 中扩展

Question

我在 IE 中的输入字段出现问题。该代码是针对一个 portlet 的，并且宽度需要是动态的，因为用户可以将 portlet 放置在页面中三个具有不同宽度的列中的任何一个上。与往常一样，它在 FF 中运行良好，但在 IE 中却不行。为了使宽度动态，我设置了 width="100%"。填充文本输入的数据来自数据库。当页面被渲染时，如果有一个长 URL，文本输入会扩展以填充 IE 中的内容，但在 FF 中它只是保持相同的宽度（即它所在的 TD 的 100%）。如何阻止 IE 更改宽度以适应内容。将宽度设置为 100 像素的固定宽度可以解决此问题，但我需要将宽度设置为百分比，以适应页面上任何位置的 portlet 的布局。

我已经尝试过溢出：隐藏和自动换行：断字，但我无法工作。这是我的输入代码和样式表

<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

我已经尝试过溢出：隐藏和自动换行：断字

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

为了使宽度动态，我设置了 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 2

我参加这个聚会有点晚了，但我自己也遇到了这个问题。

如果我对问题的理解正确，您的标记如下所示：

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

所以输入在表格中。此外，在您的 CSS 中，您将输入设置为具有基于百分比的宽度。但是，当您将大量文本放入输入中以使其扩展超过可见宽度时，表格会扩展以适应容器。

解决这个问题真的很容易，但是太随意了，没有太多帮助。解决方案是将其添加到您的 CSS（我将其添加到我的 reset.css）。

table {
  table-layout: fixed;
}

如果你愿意，你可以让它特定于 IE，但它对其他浏览器没有任何坏处（我注意到了）。

Answer 3

什么对我有用：INPUT {overflow-x:hidden; }