似乎每个浏览器都在里面添加了一些神奇的硬编码填充<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>
编辑: …
问题只发生input[type="text"]在Webkit中.无论我做什么,都会padding: 1px 0 0 1px在元素上产生额外的(仅限顶部和左侧).
类似的问题发生在Gecko中,input[type="text"]具有相同的额外功能padding: 1px 0 0 1px并且input[type="button"]具有额外的功能padding: 1px 0 0 0.
这是一个JSFiddle,向您展示我尝试过的所有内容,但没有任何作用:http://jsfiddle.net/PncMR/10/
有趣的是,当你将所有元素的行高设置为0(http://jsfiddle.net/PncMR/11/)时,唯一不受影响的元素是有问题的元素,所以我假设浏览器是默认的到特定的行高,我现在正在寻找一种覆盖它的方法.
我在webkit基础样式中找不到任何可以执行此操作的内容,但请随意检查自己:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
这不是moz-focus-inner问题,appearance: none问题,box-sizing问题或outline问题,我找不到任何其他解决方案.
编辑:请参阅下面的答案,了解垂直填充问题,但我仍然padding-left: 1px只在webkit和gecko中寻找文本输入的额外等价物的解决方案.(http://jsfiddle.net/PncMR/14/)