textarea跨浏览器尺寸不一致问题：Firefox中textarea高度异常增大的技术咨询

嘿，这个跨浏览器样式坑我之前也踩过！问题主要出在你用了rows="1.5"这个非整数值属性，再加上td的固定高度设置，导致Chrome和Firefox的渲染逻辑出现了分歧。

问题根源 #

• rows属性原本是设计用来指定整数行的，Chrome对非整数做了兼容解析，但Firefox对这个属性的处理更严格，会按照自身规则计算高度，直接导致了异常增高的情况。
• 你给td设置了height:15px，但textarea由rows计算出的高度大概率超过了这个值，Firefox处理这种容器与内部元素的高度冲突时，逻辑和Chrome不一致，进一步放大了问题。

解决方案 #

推荐用CSS精确控制textarea高度，代替依赖rows属性，这样能保证跨浏览器的一致性：

1. 调整HTML结构：把rows改成整数（比如rows="1"），避免非整数带来的渲染差异：

<td><textarea class="form-control custom-textarea" id="spec1" name="date" type="text" rows="1" cols="30"></textarea></td>
<td><textarea class="form-control custom-textarea" id="minimum1" name="date" type="text" rows="1" cols="30"></textarea></td>

2. 添加自定义CSS：通过CSS设置textarea的高度和行高，还原你想要的rows=1.5的视觉效果：

.custom-textarea {
  height: 26px; /* 可根据你的字体大小微调这个值 */
  line-height: 1.5;
  /* 如果不需要用户手动调整textarea大小，可以加上这行 */
  resize: none;
}

3. 优化td的样式：去掉td的height:15px设置，固定高度和textarea的高度存在冲突，让td自适应内容高度即可：

<td style="width:15px">1</td>
<td><textarea class="form-control custom-textarea" id="spec1" name="date" type="text" rows="1" cols="30"></textarea></td>
<td><textarea class="form-control custom-textarea" id="minimum1" name="date" type="text" rows="1" cols="30"></textarea></td>
<td style="width:15px"><input id="mandotory1" name="date" type="checkbox" style="margin-left:50px;margin-top:10px;width: 15px;height: 15px;"/></td>

为什么这样有效？ #

CSS的height是明确的像素值，所有主流浏览器的渲染逻辑一致，不会出现rows非整数那样的解析差异。同时去掉td的固定高度，避免了容器和内部元素的高度冲突，让布局更稳定。

你可以根据自己的字体大小和需求微调height数值，修改后在Chrome和Firefox里测试一下，应该就能看到一致的效果啦！

内容的提问来源于stack exchange，提问作者Muditha