Firefox 8.0 不会像其他浏览器那样调整内容大小
我正在制作一个页面，以缩小到相当小的浏览器尺寸，包括在桌面上。我已经把除了 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 大小时，会发生以下情况：页面正文保持 367px 宽度。两个不同版本的firefox，两个版本的windows，数量相同。
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您遇到的问题是，在 Firefox 中，根据您调整浏览器窗口大小时所使用的确切主题或扩展，浏览器内容区域可能不会调整大小（因为，例如，最宽工具栏上的各种按钮施加了最小宽度由于用户界面的布局方式而位于该内容区域）。
这就是为什么您看到主体大小没有改变：CSS 视口本身没有改变大小。如果您的页面有垂直滚动条，您会看到滚动条从窗口的右边缘消失，就像浏览器 UI 本身的部分消失一样。
如果您只需要进行测试，您可以通过足够的工具栏自定义来解决此问题（例如，从工具栏中删除所有内容）。另一方面，如果您只需要这个进行测试，您可能可以将网站加载到 iframe 中，然后根据需要调整大小...
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
想说一些关于“宽度：自动”与“宽度：100％”的评论，但我还不能发表评论......
您可以设置“宽度：100％”并通过设置使其考虑填充和边框“box-sizing: border-box” - 您需要使用我认为的供应商前缀 -moz- 和 -webkit-。不确定它是否能解决您的问题，但很高兴知道 - 也许尝试一下，看看会发生什么。
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.