当文本长度小于 td 的长度时，输入中的文本（在表 td 内）无法在 IE9 中正确显示答案

【问题标题】：Text within input (inside a table td) is not showing properly with IE9 when text length is less than the length of td当文本长度小于 td 的长度时，输入中的文本（在表 td 内）无法在 IE9 中正确显示
【发布时间】：2015-01-03 04:04:06
【问题描述】：

我在 td 中有一个输入字段：

<td title="" style="" role="gridcell">
   <input type="text" readonly="true" value="some_long_string_comes_here" style="background-color:transparent;border:0px solid white;">
</td>

文本的长度小于td的长度。在 Firefox 上没问题，但在 Internet Explorer 9 上我看不到整个文本。

编辑1：原因是：输入没有宽度-大小-最大长度等但是输入元素的长度小于文本。在 Firefox 中，它等于文本的长度。我不想使用任何特殊属性，例如宽度。

编辑 2：这是我在调试模式下将鼠标悬停到输入字段时的屏幕截图：

您只能看到 some_long_string_comes 而不是 some_long_string_comes_here

有什么想法吗？

【问题讨论】：

输入有大小stackoverflow.com/questions/1480588/input-size-vs-width - 如果它来自服务器，为什么不添加它（即使使用javascript）？
请提供实际重现问题的代码。省略表结构，除非它对问题至关重要。描述是什么让你认为“在 Firefox 中它等于文本的长度”；浏览器使用的默认宽度不取决于实际值的长度。
@MichailMichailidis 为什么当我没有定义宽度或大小时，输入的长度不等于内容的长度？ FF不是这样的吗？
@JukkaK.Korpela 我已经编辑了我的问题，你能检查一下吗？
它们都具有 20 个“平均”字符的默认宽度，尽管它们的“平均”概念略有不同，并且它们可能使用不同的默认字体。但重要的是宽度取决于默认值、样式表和某些 HTML 属性的存在，not 取决于内容。如果您实际上希望宽度是内容所需的最小宽度，则应重新表述您的问题。然后您可能需要更改标记（例如，将字符串作为普通内容并在隐藏字段中复制）。

标签： html css internet-explorer-9 textinput

【解决方案1】：

<input type="text"> 元素的宽度默认为 20 个“平均”字符。浏览器的“平均”概念不同，它们可能使用不同的默认字体，因此字符的宽度会有所不同。但是使用默认设置的流行浏览器的渲染并没有太大差异

可以使用size 属性或通过在CSS 中设置width 来更改宽度。它不依赖于父元素的内容或宽度（除非您使用% 单元以创建这种依赖关系的方式设置input 元素的宽度）。

如果您有一些数据希望显示给用户，并且还作为表单数据以只读方式传递，那么如果将这些功能分开，您将获得更大的灵活性。将数据作为正常内容，例如在 span 元素中（能够对其进行样式设置）并分别放入隐藏字段中：

<input type="hidden" value="some_long_string_comes_here" name="foo">
<span class="show">some_long_string_comes_here</span>

我添加了一个name 属性，因为没有它，该字段不会对表单数据做出任何贡献。

在这种方法中，可见文本默认显示为普通文本。

【讨论】：

与FF或其他浏览器相比，OP的问题甚至是IE9的问题吗？我认为这就是输入在任何浏览器中的行为方式......对吗？这不仅仅是字符的差异，而是缺少一个完整的单词。我在我的答案中写了关于尺寸和宽度的文章，OP 说要么它们不存在用于输入，要么他不想使用它（例如宽度）为什么这与他的答案更相关？ Meh - 现代仅 ajax 表单提交的输入中不需要加名称，甚至不需要表单标签，尽管拥有它们是一个好习惯

【解决方案2】：

你可以使用 span 或其他标签代替 input readonly="true" 并把 td 的规则样式 white-space: no-wrap

<td  style="white-space:no-wrap;" role="gridcell">
<span  style="background-color:transparent;border:0px solid white;"> somestring_comes_here</span>
</td>

【讨论】：

他为什么要用span替换输入？？他可能有时会使其可编辑并且是表单的一部分..
因为通过这种方式，您始终可以阅读所有内联文本；您可以使用 display:none 和 width: 100% 添加输入标签，如果它可以编辑，您可以动态更改 display: inline 并隐藏 span
跨度如何可编辑？他必须将其设为 contenteditable="true" - 因为他将其作为输入，可能是因为它是另一个视图的一部分，使其可编辑。我会坚持 OP 给出的内容
@AlessandroMarchisio 我不想用 span 代替 div。

【解决方案3】：

如果您的意思是您看不到输入中的文本 - 如果您通过添加 size="" 属性或更好地通过添加样式在输入中使用 css 格式来使输入更大，该怎么办：

<input style="width: 200px;"/>

编辑：你可以使用一些自动调整插件来调整输入的大小..（有 jquery/javascript 和 angularjs）这样输入将具有您想要的大小，然后通过使相应的表格列宽更大，td 将变得更大。

jquery 自动调整大小：jQuery - auto size text input (not textarea!)
angularjs 自动调整大小：https://stackoverflow.com/a/19303950/986160、https://gist.github.com/mbenford/8016984

【讨论】：

我不想使用宽度。我想检测原因并修复它。
可能有很多东西！不同的字体 - 输入的不同默认宽度大小 - 您没有提供足够的信息，并且您没有制作复制问题的 jsfiddle。您的问题标题省略了 IE9 并添加了无关紧要的 TD.. 我将进行编辑