文本輸入中（表TD內）不與IE9正確表示當文本長度小於TD的長度

Question

我有一個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中，我無法看到整個文本。

EDIT 1：理由是：不存在寬度 - 大小 - maxlenght等輸入但輸入元件的長度小於所述文本。在Firefox中，它等於文本的長度。我不想像寬度那樣使用任何特殊屬性。

編輯2：這裏是屏幕截圖，當我在調試模式下懸停鼠標輸入字段：

你可以看到的只有some_long_string_comes代替some_long_string_comes_here

有什麼建議嗎？

Answer 1

<input type="text">元素的寬度默認爲20個「平均」字符。瀏覽器的「平均」思想有所不同，它們可能會使用不同的默認字體，因此字符寬度會有所不同。但是，在流行瀏覽器中，其默認設置的渲染效果並不相同

可以使用size屬性或通過在CSS中設置width來更改寬度。它不依賴於父元素的內容或寬度（除非您使用%單位以創建這種依賴關係的方式設置元素的寬度）。

如果您有一些數據希望顯示給用戶，並且還可以作爲表單數據以只讀形式傳遞，那麼如果將這些函數分開，則可以獲得更大的靈活性。將數據作爲普通內容，例如在span元素（要能風格吧），並分別進入一個隱藏字段：

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

我添加了一個name屬性，因爲沒有它，該字段不給表格數據的任何貢獻。

在此方法中，默認情況下，可見文本顯示爲普通文本。

Answer 2

如果你的意思是你看不到輸入的文本 - 如果你讓你輸入更大加入size=""屬性，或者更優選使用CSS輸入格式在你的風格中加入：

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

編輯：你可以使用一些自動調整大小的插件來調整輸入..（有jquery/javascript和angularjs） 這種方式的輸入將有你想要的大小，然後通過使相應的表列寬度大。

• jQuery的自動調整大小：jQuery - auto size text input (not textarea!)

• angularjs自動調整大小：https://stackoverflow.com/a/19303950/986160，https://gist.github.com/mbenford/8016984

Answer 3

你可以使用一個跨度或其他標記，而不是輸入只讀= 「真」並把td規則樣式白色空間：無包裝

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