如何正确指定 textarea 宽度？使用 cols 属性，我使用不同的浏览器获得不同的宽度答案

【问题标题】：How correctly specify the textarea width? Using the cols attribute I obtain different width using different browser如何正确指定 textarea 宽度？使用 cols 属性，我使用不同的浏览器获得不同的宽度
【发布时间】：2015-05-29 09:31:50
【问题描述】：

我对 textarea

的宽度的定义有一些问题

所以，我有这种情况：

<div id="dialogReject" title="">
    <table style="visibility: hidden;" id="rifiutaTable" border="0" class="standard-table-cls" style="width: 100%!important">

        <tbody style="background-color: #ffffff;">
            <tr>
                <td style="font: 16px Verdana,Geneva,Arial,Helvetica,sans-serif !important">Inserire note di rifiuto</td>
            </tr>

            <tr>
                <td>
                    <textarea style="visibility: hidden;" rows="5" cols="70" id="myRejectNote"></textarea>
                </td>
            </tr>

            <tr>
                <td>
                    <input class="bottone" readonly="readonly" type="text" value="Rifiuta" onclick="rifiuta()"/>
                </td>
            </tr>
        </tbody>
    </table>

</div>

具有 id="dialogReject" 的 div 代表一个 JQuery 对话框，其中有一个 textarea，这个：

<textarea style="visibility: hidden;" rows="5" cols="70" id="myRejectNote"></textarea>

因此，如您所见，此 textarea 的宽度由其列号指定：cols="70"

实际上列数设置为 70 对 FireFox 有好处，实际上这是得到的结果：

没关系，但是当我尝试在 Explorer 上打开它时，我得到：

如您所见，仅使用 70 列不会将所有水平空间填充到我的对话框中（我必须增加到 100 列，但是当我使用 FireFox 时这样会退出对话框）

我该如何解决这个问题？我可以以某种不同的方式指定 textarea 的宽度，以便为所有浏览器正确呈现它吗？

Tnx

【问题讨论】：

@SureshPonnukalai Tnx，它有效...如果您将其发布为答案，我会接受它:-)

标签： html css xhtml textarea

【解决方案1】：

为textarea申请width:100%

 <textarea style="visibility: hidden; width:100%;" rows="5" cols="70" id="myRejectNote"></textarea>

DEMO

【讨论】：

【解决方案2】：

cols 在您希望所有浏览器在文本区域中显示相同数量的字符时很有用。这样，即使文本区域占用的像素数不同，用户体验也是一样的。
例如，将 80 个字符的字符串粘贴到 textarea 中。使用cols 的宽度，它在任何地方看起来都一样，但只有100% 的强制宽度，一个浏览器会将字符串放在一行，而另一个需要两行。

因此，解决方案不是简单地将宽度强制为100%，而是明确指定文本区域中使用的字体，包括字体家族和大小。这样，您就可以放心，结果在任何地方看起来都是一样的。

【讨论】：