文本區的行和列的大小不一致在Chrome和Firefox

Question

我一直在使用剃刀生成兩個文本區域，

@Html.TextAreaFor(model => model.Description, new { autocomplete = "off", @cols = 25, @rows = 1, disabled = "disabled" }) 

@Html.TextAreaFor(model => model.Narration, new { autocomplete = "off", @cols = 25, @rows = 1 }), 

導致如下的HTML，

<textarea autocomplete="off" cols="25" data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of '400'." data-val-maxlength-max="400" data-val-required="The Description field is required." disabled="disabled" id="Description" name="Description" rows="1">acknowledgement description</textarea> 

<textarea autocomplete="off" cols="25" id="Narration" name="Narration" rows="1"></textarea> 

生成的HTML代碼從剃刀是既在鉻和Firefox相同，但是文本區域的尺寸是不同的（167x17 px - Chrome , 204.667×36.15 px in Firefox）

是否有任何方法來解決這個問題或缺少在我的代碼？

Answer 1

顯然這是一個與Firefox的問題 according to this github issue. Firefox正在向文本區域添加一行額外的行。因爲沒有其他方法可以控制行和列，所以最好的選擇是使用css設置高度和寬度。

Answer 2

使用@ class =「textbox」屬性並指定CSS文本框中CSS屬性的高度。

.textbox{ 
     height:20px; 
} 

這裏瀏覽器的默認樣式被施加，從而需要編寫CSS規則來解決瀏覽器兼容性問題。