如何正确指定文本区域宽度？使用 cols 属性我使用不同的浏览器获得不同的宽度

Question

我对 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 列不会将所有水平 space 填充到我的对话框中（我必须增加到 100 列，但这样当我使用 FireFox 时会退出对话框)

我该如何解决这个问题？我能否以某种不同的方式指定文本区域的宽度，以便在所有浏览器中正确呈现它？

Tnx

Answer 1

为textarea申请width:100%

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

DEMO

Answer 2

如果您希望所有浏览器在文本区域中显示相同数量的字符，

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

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

如何正确指定文本区域宽度？使用 cols 属性我使用不同的浏览器获得不同的宽度

How correctly specify the textarea width? Using the cols attribute I obtain different width using different browser

html

css

xhtml

textarea