Question

我正在制作一个页面，可以缩小到相当小的浏览器大小，包括在桌面上。几乎每个浏览器都有它，但是firefox;它只是不会像其他浏览器那样使内容变小。

说我有一个这样的简单页面：

<body>
    <div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>

如果您在任何浏览器中尝试使用firefox，当您将窗口大小调整为小于540px时，div会变小，如您所料。但是在Firefox中，它没有这样的东西。至少不是8.0。它调整了div的大小，然后让它从窗口延伸出来，甚至没有留下滚动条。

这种行为有什么办法吗？

编辑：我已经在旧版本的firefox中重现了这个，但我发现了一些奇怪的东西。当我说它调整div的数量很小时，就会发生这样的情况：页面的主体宽度保持在367像素。两个不同版本的firefox，两个版本的windows，相同的数字。

Answer 1

您遇到的问题是，在Firefox中，根据您在调整浏览器窗口大小时使用的确切主题或扩展名，浏览器内容区域可能无法调整大小（例如，因为最宽的工具栏上的各种按钮强加了由于用户界面的布局方式，该内容区域的最小宽度。）

这就是为什么你看到身体没有改变大小：CSS视口本身不会改变大小。如果您的页面有一个垂直滚动条，您会看到滚动条从窗口的右边缘消失，就像浏览器UI本身的一部分消失一样。

如果只需要进行测试，可以使用足够的工具栏自定义（例如从工具栏中删除所有内容）来解决此问题。另一方面，如果您只需要进行测试，那么您可以将网站加载到iframe中，然后按照您想要的大小加载...

Answer 2

想要谈谈你对“宽度：自动”与“宽度：100％”的评论，但我还不能评论......

您可以设置“width：100％”，并通过设置“box-sizing：border-box”使其成为填充和边框的帐户 - 您需要使用我认为的供应商前缀-moz-和-webkit - 。不确定它是否能解决你的问题，但很高兴知道 - 也许试试看看会发生什么。