为什么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中的错误。InternetExplorer 8和Safari 4将最大宽度限制为100％+填充+边框，这是规范所说的。终于，Internet Explorer正确了。天哪，这太棒了！在这个过程中，在著名的大师Dean Edwards和Erik Arvidsson的大力帮助下，我设法组合了三个单独的解决方案，以在具有任意填充和边框的元素上实现真正的跨浏览器100％的宽度。请参阅下面的答案。此解决方案不需要任何额外的HTML标记，只需一个类（或选择器）和旧版Internet Explorer的可选行为即可。
3 回答
- 3 回答
- 0 关注
- 776 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消