用显示输入:块不是一个块,为什么不呢？

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

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

如何获得填充宽度的输入？100%宽度不起作用,因为输入具有填充和边框(导致最终宽度为1像素+5像素+ 100%+ 5像素+ 1像素).固定宽度不是一个选项,我正在寻找更灵活的东西.

我更喜欢直接回答变通方法.这似乎是一个CSS怪癖,理解它可能会有用.

我应该指出我已经可以使用包装器解决方法做到这一点.除了与页面语义和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的可选行为.

1> SpliFF..：

---

看看我想出了什么,使用box-sizing:border-boxCSS 3中相对未知的样式的解决方案.这允许任何元素上的'真''100%宽度,而不管元素的填充和/或边框.

    
        

        

        

        
        
    

    
        

            
div
            
        
    

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

工作示例
行为(boxsizing.htc)

---

如果可以的话,我会将这个答案推荐1000次.

---

不幸的是,如果你还需要添加边距,这种方法不能用来消除包装div(因为如果使用宽度,边距在任何元素上都不能正常工作:100%)

---

但这并不能解决问题.是的,如果你使用`width:100%`它是有效的,但如果你使用`width:auto`它不会,请看这里:http://jsfiddle.net/hGuzE/

---

先生,你是个天才.

---

Schepp的这个polyfill更新IE6/7 polyfill以处理更多边缘情况并在github上使用IE8:https://github.com/Schepp/box-sizing-polyfill

2> MatrixFrog..：

---

发生这种情况的原因是文本输入的大小由其大小属性决定.在标记内添加size ="50".然后将其更改为size ="100" - 看看我的意思？

我怀疑有一个更好的解决方案,但我想到的唯一一个问题是我在SO的"隐藏的HTML功能"问题上找到的东西:使用内容可编辑的div而不是输入.将用户输入传递给封闭的表单(如果这是你需要的)可能有点棘手.

HTML的隐藏功能

---

我很想知道CSS人们如何证明这一点.如果宽度可以用像素/百分比明确地覆盖大小,我不明白为什么当元素是块时它应该继续遵守它.

3> Jonathan Fin..：

---

你最好的选择是将输入包装在带有边框,边距等的div中,输入内部的宽度为100%,没有边框,没有边距等.

例如,

---

Jonathan,请原谅我在这里显而易见的粗鲁,但我来到这里寻找合适的(tm)答案,并且也很高兴地阅读了@SpliFF特别提及他希望"直接回答变通方法,但你仍然添加另一个冗余的部分(因为,在SO和互联网上的其他地方多次重复)回答,似乎忽略了问题的合同.我可以问你 - **为什么？**提前谢谢你.真诚的你.