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; - 但我怀疑它是通过剪切元素来工作的，因为文本的垂直位置输入中的内容不会改变。

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

2 个答案: