css - 跨浏览器的 CSS max-width 属性的不一致和意外行为

Question

我正在构建一个工具，通过书签操作现有网页上的 DOM，但我在设置某些网站的最大宽度时遇到了问题。

我的目标是调整任何页面的大小，使最大宽度为 980 像素。

然而，给正文一个最大宽度 980px 的行为是不稳定的。在某些页面上，它可以完美运行，而在其他页面上，一些元素会根据新宽度重新定位，而另一些则不会。

以 Google.com 为例。在以下每个屏幕截图中，我都为正文指定了 980 像素的最大宽度。我还手动添加了一条蓝线，显示 980px 应该在哪里。

在 Chrome 中:

请注意页面顶部的工具栏未调整大小，搜索字段区域仍基于原始宽度居中，而不是新的 980 像素宽度。

在 Firefox 中:

请注意搜索区域是如何重新定位的，但工具栏(如 Chrome)仍保持整个文档的宽度。

有什么我可以做的，以便在所有站点和所有浏览器中将页面正确调整为 980 像素？

Answer 1

除了使用 javascript，我认为没有仅使用 CSS 的跨浏览器解决方案。并非所有浏览器都支持最大宽度。