Chrome、Safari和Internet Explorer呈现文本区填充的方式与Firefox和Opera不同。现在他们中的哪一个呈现的文本区不正确？这取决于你试图实现什么，因为事实上他们都没有呈现错误，他们都添加了填充，这只是归结为他们如何解释规范。
没有CSS属性可以解决这个“问题”，所以解决这个“问题”的唯一方法是在文本区域添加一个容器元素，并给予它一个填充。

实际上，它仍然存在;你只需要向下滚动就可以看到文本框内容填充时额外的20 px填充。我建议使用overflow：隐藏。

您可以将样式font-size: 0;指定给form标记，因为问题是在这样的标记中，某个地方有一个新行，您需要避免它。
完成后，您应该为包含内容的组件分配正确的字体大小，在最简单的情况下，就是文本区域。

我现在把我的textarea元素 Package 在一个div元素中，然后在上面设置填充和边框。textarea现在把它的边框和填充设置为零。另外我还隐藏了调整大小的句柄。

<label for="giftMessage">Add a gift message
    <div class="textAreaWrapper">
        <textarea name="gift_message" class="input-text" id="giftMessage" value="" placeholder="Add your message here"></textarea>
    </div>
</label>
<style>
.textAreaWrapper {
    border:solid 1px #ededed;
    padding:15px;
}
textarea.input-text {
    width: 100%;
    padding: 0;
    border:0;
    resize: none;
    font-size: 16px;
    color:#000000;
    resize: none;
}
</style>

**截至2022年，**现在有一个简单的修复称为scroll-padding，它调整了浏览器将滚动捕捉到的区域。

textarea {
    padding: 20px;
    scroll-padding: 20px;
}

使用属性border-button可以部分解决此问题。
例如：

.textarea {
  border-bottom: 19px solid white;
}