Chrome和Firefox中的文本区域行和列大小不一致

Question

我一直在用razor生成两个文本区域，

@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代码在Chrome和Firefox中都是相同的，但文本区域的大小不同（167x17 px - Chrome , 204.667×36.15 px in Firefox）

是否有任何方法可以解决此问题或我的代码中缺少的内容？

Answer 1

显然这是Firefox的一个问题 according to this github issue. Firefox正在向文本区域添加额外的行。由于没有其他方法可以控制行和列，最好的选择是使用css设置高度和宽度。

Answer 2

使用@class =＆＃34; textbox＆＃34;属性并在文本框CSS类中指定高度CSS属性。

.textbox{
        height:20px;
}   

这里应用浏览器默认样式，因此需要编写CSS规则来克服浏览器兼容性问题。