CSS width 和 height 属性的最大像素值是多少？

Posted 2023-03-06

【中文标题】CSS width 和 height 属性的最大像素值是多少？

【英文标题】：What's the maximum pixel value of CSS width and height properties?

【发布时间】：2013-05-14 07:16:51

【问题描述】：

CSS width 和 height 属性接受的最大有效 px 值是多少？

（我目前正在构建一个 webapp，它会创建一个非常大的可缩放容器元素，我想知道实际的限制是什么。）

【问题讨论】：

它依赖于 UA - 没有单一的价值可以通过

@Adrift 请详细说明。

"CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions." - Values and Units Module 中的第 4 部分 - 所以你必须为每个浏览器弄清楚。

【参考方案1】：

在带有10000000000px width and height的元素上使用某些浏览器附带的CSS检查器：

Firefox: 33554400px
Chrome:  33554428px
Opera:   33554428px
IE 9:    21474836.47px

【讨论】：

IE7 说.... 134217727px jsfiddle.net/SQ7Lz

测试了这些

MS Edge 报告 10737418.23px

不幸的是，您不能信任 CSS 检查员。例如在 IE11 中，如果您将某物的高度设置为 600 万像素，则检查器会将其报告为 -184070.03px；但使用 javascript 你可以看到它是 1533916.875px。这是您可以在 IE11 和 Edge 中通过 css 设置的最大高度。 @colllin 所展示的是，您可以使元素大于将元素放入其中的限制。我最近一直在看这个问题：jsfiddle.net/JoolsCaesar/aczx25u4/8

另外，IE11 和 Edge 完全无法解析 @JamesDonnelly 的 jsfiddle 中的 CSS (10000000000px)，所以它们的高度只有 18px。不仅各种值都有奇怪和冲突的限制，例如 IE 可以报告的 scrollHeight 比它可以拥有的要低得多，所以你有 scrollTop，比你的 scrollHeight 大得多（可以在那个小提琴中看到 ^ )。