为什么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中的一个错误.Internet Explorer 8和Safari 4将最大宽度限制为100%+填充+边框,这是规范所要做的.最后,Internet Explorer做对了.
天啊,这真棒!在玩这个游戏的过程中,在尊敬的大师Dean Edwards和Erik Arvidsson的帮助下,我设法将三个独立的解决方案拼凑在一起,在具有任意填充和边框的元素上实现真正的跨浏览器100%宽度.见下面的答案.此解决方案不需要任何额外的HTML标记,只需要一个类(或选择器)和旧版Internet Explorer的可选行为.
Spl*_*iFF 129
看看我想出了什么,使用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的一些调整来支持百分比和其他非像素宽度.
你最好的选择是将输入包装在带有边框,边距等的div中,输入内部的宽度为100%,没有边框,没有边距等.
例如,
<!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 {
border: 1px solid red;
padding: 5px;
}
input, form {
display: block;
width: 100%;
}
</style>
</head>
<body>
<form>
<div><input type="text" name="foo" /></div>
</form>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
66189 次 |
| 最近记录： |