html – 额外填充 - 前端之家

看来每个浏览器都会在< 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.

原文链接：https://www.f2er.com/html/230754.html

html – 额外填充

解决方法

猜你在找的HTML相关文章