Html 防止IE中的文本输入扩展

IE中的输入字段有问题。代码是针对portlet的，宽度需要是动态的，因为用户可以将portlet放在页面中三列中的任意一列上，这三列的宽度都不同。一如既往，它在FF中工作良好，但在IE中不工作。为了使宽度动态，我将宽度设置为100%。用于填充文本输入的数据来自数据库。当页面呈现时，如果有一个长URL，文本输入将展开以填充IE中的内容，但在FF中，它只是保持相同的宽度，即它所在TD的100%。如何阻止IE更改宽度以适应内容。将宽度设置为固定宽度100px可以解决这个问题，但我需要将宽度设置为百分比，以便在页面上放置portlet的任何位置都能适应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;   
}

我尝试过溢出：隐藏和换行：断开单词

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

为了使宽度动态，我将宽度设置为100%

这应该行得通，但父表需要约束为宽度和表布局：否则算法会起作用，这很复杂，有点不稳定，可能无法实现您想要的功能

这是我如何布局液体窗体的一个示例。请注意，在不支持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;
}

---

这次聚会我来晚了一点，但我自己也遇到了这个问题

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

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

---

如果你想的话，你可以让它特定于IE，但它不会对我注意到的其他浏览器造成任何不良影响。

对我有效的方法：输入{overflow-x:hidden；}

你能发布一个到示例页面的链接，或者至少是一个正确与错误FF与IE的屏幕截图吗？我不能提供一个链接，因为它是一个内部应用程序，我有一个截图，但刚刚意识到我不能上传它，我也不能从工作中访问图像托管！基本上在IE中，当其中一个表单字段中有URL时，我的整个表的宽度是原来的三倍。在FF中，它保持相同的文本，您必须将光标放在文本输入中并向右滚动以查看文本。FF的行为正是我想要的。谢谢你的回复。我试图实现您提供的样式，但它仍然在做同样的事情，将整个portlet扩展到屏幕大小的2/3。整个portlet应该只占屏幕的1/4。我不这样做。你能发布一个测试用例，包括演示失败的外部包装吗？我不确定你问我的是什么？我的意思是我们无法猜测为什么你在没有代码的情况下实现这个的尝试会失败。我不知道包装portlet的内容是什么样子，因为您还没有发布它生成的HTML。这个例子对我很有用；如果我们不能重现这个问题，我们就无法修复它。有太多的代码要发布。我想我是在寻找一种快速的方法来告诉IE停止更改输入。我已经成功地将用户jQuery整合到一起，以计算所需的宽度，并在所有输入使用的样式上设置精确的宽度。它工作得很好，但如果它能像预期的那样工作，显然会更好。谢谢你的帮助！这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。为什么？问题在标题中，或者我如何阻止IE更改宽度以适应内容，不确定这怎么可能不是答案，我在IE6上遇到了同样的问题，并以这种方式修复了它。然后你应该添加完整的工作代码片段。该片段就是我编写的。这个问题中唯一清楚的是标题，然而当搜索这个问题时，它在谷歌的顶部，只影响IE6，IE7显然在2006年修复了这个问题。没有被接受的答案，有一个答案说溢出不会对输入做任何有用的事情，相反，溢出-x为我工作，为什么？我不想知道；-我正在使用Bootstrap+集成IE6，这是一个复杂的设置，就像Caroline一样，我不能在这里写它。

table {
  table-layout: fixed;
}