Question

当我嵌套DIV时，我可以使内部DIV适合外部DIV，这是浏览器的宽度，并且内部DIV中的内容只有一个滚动条：

<body>
    <div style="width:100%; border: thick dotted blue">
        <div style="width:99%; overflow: auto; border: thick dotted green">
            ================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
        </div>
    </div>
</body>

当我尝试使用字段集执行相同的操作时，尽管宽度为100％，DIV仍会向右移动页面。以下代码的唯一浏览器以我想要的方式工作在Internet Explorer中。在Firefox和Chrome中，它超出了浏览器的宽度：

<body>
    <div style="width:100%;">
    <fieldset style="width:100%;">
        <legend>test</legend>
        <div style="width:100%;  overflow: auto;">
            ================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
        </div>
    </fieldset>
    </div>
</body>

如何使字段集代码与顶部代码相同，而不是其内容超出浏览器宽度？

Answer 1

经过一番搜索，我在这篇文章中遇到了一个黑客 stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears- to-have-unremovable-min-width-min-content。基本上，您必须将以下CSS添加到您的站点/页面，以便字段集在基于Gecko的浏览器中按照我希望的方式运行：

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

无法在字段集中获取DIV以不超过浏览器宽度

1 个答案: