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

使用@class="textbox" 属性并在文本框中指定高度 CSS 属性 CSS class.

.textbox{
        height:20px;
}

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

Answer 2

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

设置高度和宽度

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

Text Area row and column size inconsistency in Chrome and Firefox

html

firefox

textarea

google-chrome

razor