html - 防止文本输入在 IE 中扩展

Question

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

我已经尝试过 overflow:hidden 和 word-wrap: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，但它不会对其他浏览器造成任何不良影响(我已经注意到)。