Question

操作系统：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">

是什么原因和解决方案？
谢谢！

Answer 1

您可以使用display: block; textarea修复它，也可以使用vertical-align: top;。

~~Buggy Demo~~

Fixed Demo

Vertically Aligned

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

enter image description here

Answer 2

你可以做多件事：

1：将overflow: hidden添加到*。

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

fiddle

2：像Alien先生所说的那样display: block使用textarea。

textarea {
    display: block;
}

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

fiddle

高度：textarea的100％导致Chrome中的垂直滚动条

2 个答案: