文本区域下的额外空间,因浏览器而异

2023-11-23

textarea 标签下有一些额外的空间。不同浏览器中为 1 到 4 像素。标记非常简单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .main {
                background-color: red;
            }
            textarea {
                background-color: gray;
                resize: none;
                margin: 0;
                border: 0 none;
                padding: 10px;
                height: 50px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <textarea></textarea>
        </div>
    </body>
</html>

以下是它在浏览器中的呈现方式:

Screenshot

为什么会发生这种情况?如何删除这个多余的空间?


Add vertical-align: top to textarea.

造成差距的原因在于textarea is an inline (or inline-block) 元素,间隙是为下降部在文本中。我不知道为什么不同浏览器之间的差距不同。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

文本区域下的额外空间,因浏览器而异 的相关文章

随机推荐