似乎每个浏览器都在里面添加了一些神奇的硬编码填充<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(以防万一),但它们的值都没有删除额外的填充。