Html <input type="text"> 中的额外填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1846515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extra padding in <input type="text">
提问by Jan Zich
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">.
似乎每个浏览器都在里面添加了一些神奇的硬编码填充<input type="text">。一些浏览器（IE、Safari、Chrome）使输入框高一点，但它们正确地顶部对齐，就好像它是一个常规的 HTML 元素。我可以忍受额外的高度。但是一些浏览器行为不端（Firefox 和 Opera）并且还尝试垂直对齐文本或在其上方添加一些额外的填充。我很惊讶现代浏览器不允许像 HTML 一样布局文本框并添加一些神奇的格式。难道我做错了什么？我错过了一些技巧吗？它们是一些可以帮助我的专有 CSS 属性吗？我简要地查看了 Firefox CSS 文档，但找不到任何文档。或者，我可以使用可编辑的 HTML 而不是<input type="text">.
Here is a snippet which demonstrates the problem:
这是一个演示问题的片段：
<!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>
Edit:I experimented a bit with -moz-outlineand -moz-box-sizingin Firefox (just in case), but none of their values removes the extra padding.
编辑：我在 Firefox中尝试了-moz-outline和-moz-box-sizing（以防万一），但它们的值都没有删除额外的填充。
回答by jessebeach
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;
It makes the modern browsers behave the same. You might need to target IE specifically.
它使现代浏览器的行为相同。您可能需要专门针对 IE。
回答by Will Prescott
I experimented by changing your line-height and font-size values to 20px and then inspecting the element with Firebug. The clientHeight and offsetHeight properties are both 24px (but since those properties include any padding set on the element I'm not sure if this is the browser expanding the element height, or adding padding).
我通过将 line-height 和 font-size 值更改为 20px 然后使用 Firebug 检查元素进行了实验。clientHeight 和 offsetHeight 属性都是 24px（但由于这些属性包括元素上设置的任何填充，我不确定这是浏览器扩展元素高度还是添加填充）。
Explicitly setting the height of the input to be the same as the line-height seems to do what you want, i.e. line-height: 16pt; height: 16pt;- but I suspect it works by clipping the element, as the vertical position of the text within the input doesn't change.
显式地将输入的高度设置为与 line-height 相同似乎可以满足您的要求，即line-height: 16pt; height: 16pt;- 但我怀疑它是通过裁剪元素来工作的，因为输入中文本的垂直位置不会改变。
