似乎每个浏览器都在里面添加了一些神奇的硬编码填充<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进行了一些实验(以防万一),但它们的值都没有删除额外的填充.
您可以通过更改输入的框大小来消除此额外填充.
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
它使现代浏览器的行为相同.您可能需要专门针对IE.
我尝试将行高和字体大小值更改为 20px，然后使用 Firebug 检查元素。clientHeight 和 offsetHeight 属性均为 24px（但由于这些属性包括元素上设置的任何填充，我不确定这是否是浏览器扩展元素高度或添加填充）。
明确地将输入的高度设置为与行高相同似乎可以满足您的要求，即line-height: 16pt; height: 16pt;- 但我怀疑它是通过剪切元素来工作的，因为输入中文本的垂直位置不会改变。