如何正確指定textarea寬度？使用cols屬性我使用不同的瀏覽器

獲得不同的寬度，我有一些問題與textarea的如何正確指定textarea寬度？使用cols屬性我使用不同的瀏覽器

所以寬度的定義，我有這樣的情況：

<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」表示JQuery的對話框，其中有一個textarea的，這一個：

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

所以，你可以看到，這個textarea的的寬度由它的列數指明：的cols =「70」

實際上，列數設置好的在70和它好火狐 ，這是逸岸所獲得的結果是：

enter image description here

，這是好的，但是當我嘗試打開它瀏覽器我獲得：

enter image description here

正如你可以看到只用70列不填充全部水平空間變成了我的對話框（我必須增加至100列，但以這種方式走出去的對話，當我使用Firefox）

我該如何解決這個問題？我能否以某種不同的方式指定textarea寬度，以便爲所有瀏覽器正確渲染？

TNX

來源

2015-05-29 AndreaNobili

使用'width：100％' –

@SureshPonnukalai Tnx，它的工作原理...如果你把它作爲答案發布我會接受它:-) – AndreaNobili

申請width:100%爲textarea

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

DEMO

來源

2015-05-29 09:50:36

cols如果你想所有的瀏覽器顯示相同數目的textarea的字符是非常有用的。這樣，即使textarea佔用的像素數量不同，用戶體驗也是一樣的。
作爲一個例子，將一個80個字符的字符串粘貼到textarea中。寬度爲cols，它在任何地方看起來都一樣，但只有強制寬度爲100%，一個瀏覽器會將該字符串放在一行上，而另一個瀏覽器需要兩行。

因此，解決方案不是簡單地將寬度強制爲100%，而是明確指定在textarea中使用的字體，包括族和大小。這樣，你可以放心，結果在任何地方都一樣。

來源

2015-06-12 06:45:38

如何正確指定textarea寬度？使用cols屬性我使用不同的瀏覽器

回答

相關問題