css - 为什么 div 在 chrome 和 safari(但不是 firefox)的文本区域底部添加 4 个像素？

Question

我尝试在页面底部放置一个红色文本区域:

https://jsfiddle.net/akcmd94u/5/

html

<div class="footer">
  <textarea rows=1></textarea>
</div>

CSS

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin:0;
}
textarea {
    background-color: red;
    border: none;
    padding: 0;
    margin:0;
    height: 30px;
}

在最新的 FireFox 上，文本区域正确地位于底部。

但在最新的 Chrome 和最新的 Safari 上，底部边框和文本区域之间存在间隙。

如何消除 Chrome 和 Safari 上的这种差距？

Answer 1

那是因为文本区域显示为一个内联 元素。因此，它的高度计算方式与您对 block 元素的预期不同。

这将解决您的问题:

textarea { display: block; }

此外，通过这种方式可以保证文本区域和容器的高度相同。干杯。