高度：textarea 的 100% 导致 Chrome 中的垂直滚动条答案

【问题标题】：Height: 100% for textarea causes vertical scroll bar in Chrome高度：textarea 的 100% 导致 Chrome 中的垂直滚动条
【发布时间】：2014-01-07 07:54:43
【问题描述】：

操作系统：Windows XP
浏览器：Chrome 31
问题：当我查看以下内容时，我看到一个额外的垂直滚动条：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Textarea</title>
    <style>
        * {
            width: 100%;
            height: 100%;
            margin: 0;
            border: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <form>
        <textarea></textarea>
    </form>
</body>

</html>

网址：https://googledrive.com/host/0B5jOXzxlxbMhYVF3b0lubjlDWm8/textarea.html

如果我使用HTML 4.01 Transitional doctype 不会发生这种情况：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

是什么原因及解决方法？
谢谢！

【问题讨论】：

标签： css html google-chrome textarea

【解决方案1】：

您可以将display: block; 用于您的textarea 来修复它，或者您也可以使用vertical-align: top;..

~~Buggy Demo~~

Fixed Demo

Vertically Aligned

原因：Chrome 使用 display: inline-block; 作为导致该问题的 textarea 元素

【讨论】：

真的吗？ Chrome 的行为对我来说很有意义。我无法弄清楚 Firefox 是如何确定 textarea 的基线的。它似乎与错误报告中的描述不匹配。有什么想法吗？
@Alohci 好吧，这就是他们的行为方式，即使您添加 vertical-align: top; 它也会修复，我会继续将其添加到我的答案中..
是的。 Chrome 设置 textarea 基线的方式与设置 img 基线的方式相同，因此避免字体下降空间的常用方法起作用。但是 Firefox 以某种方式设置了不同的基线。例如，请参阅 jsfiddle.net/f353S/2/ 并尝试调整边距、填充和边框宽度设置。
@Alohci 正在摆弄这些工具并想通了 ;)
@Alohci 在 ff 和 chrome jsfiddle.net/f353S/3 中进行比较，顺便说一句，感谢您排除了这个错误......

【解决方案2】：

你可以做很多事情：

1：将overflow: hidden 添加到您的*。

* {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
}

fiddle

2：就像外星人所说的那样，将display: block 用作textarea。

textarea {
    display: block;
}

我推荐这种方法，因为它专注于 textarea 元素，而不是文档中的所有 (*) 元素。

fiddle

【讨论】：