<input type="text">中的额外填充

Question

<input type="text">中的额外填充

15

似乎每个浏览器都在<input type="text">内添加了一些神奇的硬编码填充。有些浏览器（IE、Safari、Chrome）使输入框略微变高，但它们以正常的 HTML 元素顶部对齐。我可以接受额外的高度。但是有些浏览器表现不佳（Firefox 和 Opera），还尝试垂直对齐文本或在其上方添加一些额外的填充。我惊讶于现代浏览器不能像 HTML 一样布置文本框并添加一些魔术格式。我是做错了什么吗？我是否错过了某些技巧？它们是否有某些专有的 CSS 属性可以帮助我？我简要查看了 Firefox 的 CSS 文档，但没有找到任何内容。或者，我可以使用可编辑的 HTML 替代 <input type="text">。

这里是一个演示问题的代码片段：

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

    <title>Test</title>

    <style type="text/css">

        body, input {
            font-family: sans-serif;
            font-size: 16pt;
            color: White; }

        #textbox {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 100px;
            background-color: #A5C9E2;
            line-height: 16pt;
            padding: 0px;
            margin: 0px;
            border-width: 0px; }

        #box {
            position: absolute;
            left: 120px;
            top: 20px;
            width: 100px;
            background-color: #AFD66A;
            line-height: 16pt; }

    </style>

</head>
<body>

    <input type="text" id="textbox" value="Hello">

    <div id="box">Hello</div>

</body>
</html>

编辑：我在Firefox中尝试了一下-moz-outline和-moz-box-sizing，但它们的任何值都没有去除额外的填充。

- Jan Zich

1

开始之前，请关闭您的输入：....="你好" /> - joshcomley

请查看[此问题][1]的被接受答案。 [1]:https://dev59.com/l3M_5IYBdhLWcg3w-4dg - erikkallen

7

由于他没有使用XHTML，所以这确实是有效的。 - Ben Everard

1

我相信它在HTML 4.01 Transitional中是有效的，但肯定不是问题所在。 - Jan Zich

可能是如何在Webkit和Gecko中删除文本输入框上的额外和不同伪填充？的重复问题。 - Engineer

2个回答

3

我曾试验将你的行高和字体大小值更改为20px，然后使用Firebug检查元素。clientHeight和offsetHeight属性都是24px（但由于这些属性包括在元素上设置的任何填充，我不确定这是否是浏览器扩展元素高度或添加填充）。

显式设置输入框的高度与行高相同似乎可以实现你想要的效果，即line-height: 16pt; height: 16pt;，但我怀疑它是通过剪切元素来实现的，因为输入框中文本的垂直位置并没有改变。

- Will Prescott

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jessebeach · Accepted Answer

您可以通过更改输入框的盒模型(box-sizing)来消除这些额外的填充(padding)。

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

它使现代浏览器的行为相同。您可能需要专门针对IE进行定位。