额外填充<input type=“text”>

Question

似乎每个浏览器都在<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进行了一些实验（以防万一），但它们的值都没有删除额外的填充。

Answer 1

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

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

它使现代浏览器的行为相同。 您可能需要专门针对IE。

Answer 2

我通过将行高和字体大小值更改为20px然后使用Firebug检查元素进行了实验。 clientHeight和offsetHeight属性都是24px（但由于这些属性包括元素上的任何填充集，我不确定这是扩展元素高度的浏览器，还是添加填充）。

将输入的高度显式设置为与行高相同似乎可以达到您想要的效果，即line-height: 16pt; height: 16pt; line-height: 16pt; height: 16pt; - 但我怀疑它是通过剪切元素来工作的，因为输入中文本的垂直位置不会改变。

额外填充<input type=“text”>

问题描述

2 个解决方案

解决方案1
9 2010-08-02 21:00:40

解决方案2
3 2009-12-04 13:23:03

额外填充<input type=“text”>

问题描述

2 个解决方案

解决方案1 9 2010-08-02 21:00:40

解决方案2 3 2009-12-04 13:23:03

解决方案1
9 2010-08-02 21:00:40

解决方案2
3 2009-12-04 13:23:03