使用display：block输入的不是块，为什么不呢？

彭宏义

2023-03-14

问题内容：

为什么display:block;width:auto;在我的文本输入中表现不像div那样填充容器宽度？

我的印象是div只是具有自动宽度的块元素。在以下代码中，div和输入的尺寸不应该相同吗？

如何获取输入以填充宽度？100％的宽度无效，因为输入具有填充和边框（导致最终宽度为1像素+ 5像素+ 100％+ 5像素+
1像素）。固定宽度不是一个选择，我正在寻找更灵活的方法。

我希望直接找到解决方法。这似乎是一个CSS怪癖，理解它以后可能会有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, input {
            border: 1px solid red;
            height: 5px;
            padding: 5px;
        }
        input, form {
            display: block;
            width: auto;
        }
        </style>
    </head>

    <body>
        <div></div>
        <form>
            <input type="text" name="foo" />
        </form>
    </body>
</html>

我应该指出，我已经可以使用包装器解决方法来做到这一点。除了页面语义和CSS选择器关系的这种混乱之外，我试图了解问题的性质以及是否可以通过更改INPUT本身的性质来解决。

好的，这真是奇怪！我发现解决方案是简单地使用添加max-width:100%到输入中width:100%;padding:5px;。但是，这引发了更多的问题（我将在另一个问题中回答），但是宽度似乎使用普通的CSS盒子模型，而max-width使用Internet Explorer边框模型。真奇怪

好的，最后一个似乎是Firefox 3中的错误。InternetExplorer8和Safari4将最大宽度限制为100％+填充+边框，这是规范所说的。终于，Internet Explorer正确了。

天哪，这太棒了！在此过程中，在著名的大师DeanEdwards和ErikArvidsson的大力帮助下，我设法组合了三个单独的解决方案，以在具有任意填充和边框的元素上实现真正的跨浏览器100％的宽度。请参阅下面的答案。此解决方案不需要任何额外的HTML标记，只需一个类（或选择器）和旧版InternetExplorer的可选行为即可。

问题答案：

看看我想出了什么，一种使用box-sizing:border-boxCSS 3
相对未知的样式的解决方案。这允许任何元素上的“真”宽度为100％，无论该元素的填充和/或边框如何。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

该解决方案通过Erik Arvidsson编写的行为支持Internet Explorer 6和Internet Explorer 7，并通过Dean
Edwards的一些调整来支持百分比和其他非像素宽度。

使用display：block输入的不是块，为什么不呢？

相关阅读

相关文章

相关问答

相关工具

相关文档