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

问题描述：

看起来每个浏览器都在< input type =text> 中添加了一些魔术硬编码填充。一些浏览器（IE，Safari，Chrome）使输入框有点高，但他们正确地顶部对齐，就像它是一个普通的HTML元素。我可以住在额外的高度。但一些浏览器的行为不正确（Firefox和Opera），并尝试垂直对齐文本或在其上添加一些额外的填充。我很惊讶，现代浏览器不允许布局文本框，就像他们和HTML一样，并添加一些魔术格式。我做错了什么？我缺少一些技巧？他们是一些专有的CSS属性，可以帮助我吗？我简单看了一下Firefox的CSS文档，但我找不到任何。或者，我可以使用可编辑的HTML代替< input type =text> 。

It seems that every browser adds some magic hardcoded padding inside <input type="text">. Some browsers (IE, Safari, Chrome) make the input box a bit taller, but they properly top align as if it was a regular HTML element. I can live with the extra height. But some browsers misbehave (Firefox and Opera) and also try to either vertically align the text or add some extra padding above it. I'm surprised that modern browsers don't allow to layout textboxes as if they the same way as HTML and add some magic formatting. Am I doing something wrong? Am I missing some trick? Are they some proprietary CSS properties which could help me? I briefly looked at Firefox CSS documentation, but I could not find any. Alternatively, I could use editable HTML instead of <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>

编辑：我尝试了 - moz-outline 和 - moz-box-sizing ，但是它们的值都不会移除额外的填充。

I experimented a bit with -moz-outline and -moz-box-sizing in Firefox (just in case), but none of their values removes the extra padding.

答

您可以通过更改输入框大小来消除此额外填充。

You can eliminate this extra padding by changing the box-sizing of the input.

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

它使现代浏览器的行为相同。您可能需要特别指定IE。

It makes the modern browsers behave the same. You might need to target IE specifically.

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

相关推荐