我想把一个可滚动的盒子放在里面fieldset,但我遇到了一个怪癖,我无法弄清楚它的方式.当您将可滚动条div放在a中时fieldset,fieldset展开而不是使可滚动元素滚动.
这是一个测试用例.以下扩展无限期(boo):
但是如果你使用adiv,它会按预期工作(欢呼!):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam.
我怎样才能fieldset表现得像div？
WebKit和Firefox约束字段集具有基于其内容的计算宽度的"隐式"宽度.以下是如何在每个中覆盖它的方法.
WebKit使它相对容易.此行为在默认样式表中定义,因此您可以通过指定min-width: 0字段集来覆盖它.
Firefox是一个更难的坚果,因为在Gecko布局代码中强制实施了字段集宽度约束.幸运的是,有一种解决方法:添加仅Gecko规则,将display字段集的属性设置为与多个内部表元素之一对应的值.
把它们放在一起:
fieldset { min-width: 0; }
/* FF hack; not needed for newer versions */
@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */
fieldset { display: table-cell; }
}
jsFiddle演示.
现在修复了需要display: table-cell黑客攻击的[Firefox bug] [bug] ; 如果你的目标是较新版本的Firefox,你可以省略它,只需使用min-width: 0.(感谢@Nikolay的提醒!)
有关以前为什么需要的详细信息,我对相关问题的回答有更全面的解释,包括血腥浏览器内部.
京公网安备 11010802040832号 | 京ICP备19059560号-6 