gpt4 book ai didi

html - 输入显示:block is not a block,为什么不行?

转载 作者:技术小花猫 更新时间:2023-10-29 11:25:51 24 4
gpt4 key购买 nike

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

我的印象是 div 只是一个具有自动宽度的 block 元素。在下面的代码中,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; 的输入中。然而,这引发了更多问题(我将在一个单独的问题中提出),但似乎 width 使用普通的 CSS 框模型,而 max-width 使用 Internet Explorer 边框框模型。多么奇怪。

好吧,最后一个似乎是 Firefox 3 中的一个错误。Internet Explorer 8 和 Safari 4 将最大宽度限制为 100% + padding + border,这是规范所说的。 Internet Explorer 终于做对了。

我的天啊,太棒了!在玩的过程中,得到了各位大神的帮助Dean EdwardsErik Arvidsson ,我设法将三个独立的解决方案拼凑在一起,以在具有任意填充和边框的元素上实现真正的跨浏览器 100% 宽度。请参阅下面的答案。此解决方案不需要任何额外的 HTML 标记,只需要一个类(或选择器)和旧版 Internet Explorer 的可选行为。

最佳答案

看看我想出了什么,一个使用 CSS 3 中相对不为人知的 box-sizing:border-box 样式的解决方案。这允许任何元素上的“真实”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 进行了一些调整以支持百分比和其他非像素宽度。

Working example
Behaviour (boxsizing.htc)

关于html - 输入显示:block is not a block,为什么不行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1030793/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com