如何正确指定textarea宽度？使用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 有利，实际上这是获得的结果：

没关系，但是当我尝试在资源管理器上打开它时，我获得了：

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

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

TNX

Answer 1

为width:100%

申请textarea

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

DEMO

Answer 2

如果您希望所有浏览器在textarea中显示相同数量的字符，则

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

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