防止IE中的文本输入扩展

我遇到了IE中输入字段的问题。该代码适用于portlet，因为用户可以将portlet放在页面中三列中任何一列上的宽度都不相同的宽度上，所以宽度必须是动态的。一如既往，它在FF中正常工作，但不在IE中。为了使宽度dyanaic我已经设置宽度=“100％”。填充文本输入的数据来自数据库。当页面呈现时，如果有一个长URL，文本输入展开以填充IE中的内容，但在FF中它只保持相同的宽度（即其所在TD的100％）。我怎样才能阻止IE改变宽度，以适应内容。将宽度设置为100px的固定宽度可以解决问题，但我需要将宽度设置为百分比，以便容纳无论放置在页面上的哪个portlet的布局。防止IE中的文本输入扩展

我已经尝试过溢出：隐藏和单词包装：闯词，但我不能得到任何工作。这是我的输入代码和样式表

<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; 
}

来源

2009-11-11 Caroline

你能够发布一个链接到一个示例页面，或者至少是不正确VS正确的截图（FF VS IE）？ – 2009-11-11 16:08:24

我无法提供链接，因为它是一个内部应用程序，我有一个截图，但只是意识到我无法上传它，而且我也无法从工作中访问图像托管！基本上在IE中，当表单域中有一个URL时，我的整个表的宽度会增加三倍。在FF中它保持相同，您必须将光标置于文本输入中，并向右滚动以查看文本。 FF的行为就是我想要的。 – Caroline 2009-11-11 16:37:45

我曾尝试溢出：隐藏和自动换行：打破字

是啊，他们不会做任何的输入有用。

为了使宽度dyanaic我设置宽度=“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; 
}

来源

2009-11-11 16:11:45 bobince

感谢您的回复。我试图实现你给出的样式，但它仍然在做同样的事情，将整个portlet扩展为屏幕大小的2/3（整个portlet只应占用屏幕的四分之一） – Caroline 2009-11-11 17:34:29

It不适合我。你能发布一个测试用例，包括展示失败的外部包装吗？ – bobince 2009-11-11 18:51:17

我不确定你在问我什么？ – Caroline 2009-11-12 09:36:09

我对这个派对有点迟到，但我自己却碰到了这个问题。

如果我理解正确的问题，您的标记看起来是这样的：

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

所以输入是在表中。另外，在你的CSS中，你将输入设置为具有基于百分比的宽度。但是，如果在输入中放入如此多的文本以使其扩展超过可见宽度，则表将展开以适应容器。

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

table { 
    table-layout: fixed; 
}

如果你愿意，你可以使它具体化为IE，但是对其他浏览器（我注意到）没有任何坏处。

来源

2010-05-24 22:05:26 RussellUresti

什么工作对我来说：INPUT {overflow-x:hidden; }

来源

2015-10-27 10:36:45

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 – 2015-10-27 13:35:52

为什么？问题是在标题或“我怎么能阻止IE改变宽度以适应内容”，不知道这怎么可能不是答案，我在IE6上遇到了同样的问题并以此方式修复它。 – 2015-10-27 18:23:31

然后你应该添加完整的工作代码片段。 – 2015-10-27 18:31:49

防止IE中的文本输入扩展

回答

相关问题