Hacker News 中文摘要

RSS订阅

无限像素 -- Infinite Pixels

原文链接 | HN讨论 | 2025-08-07 22:55:51

文章摘要

作者在社交媒体上发现了一个有趣的CSS技巧，使用calc(infinity * 1px)来测试浏览器如何处理无限值。通过在Firefox、Chrome和Safari中测试，发现不同浏览器对无限值的处理方式不同，最终都会将其限制为某个有限值，揭示了浏览器在处理极端值时的行为差异。

文章总结

无限像素的探索

在浏览社交媒体时，我偶然发现了一条由Andy P发布的推文，内容是一个有趣的CSS技巧：

css width: calc(infinity * 1px); height: calc(infinity * 1px);

这让我立刻想到，这是一个完美的极限测试工具。通过使用CSS中的infinity关键字，浏览器将不得不将这些无限值限制为某个有限值，从而揭示它在处理这些属性时的极限。

我首先按照Andy的建议，编写了一个简单的测试代码：

css div { width: calc(infinity * 1px);  height: calc(infinity * 1px); margin: 0; padding: 0; }

```html

 
I’m huge!

```

然后，我在macOS上的Firefox Nightly、Chrome稳定版和Safari稳定版中加载了这个测试页面，结果立即变得非常奇怪：

| 浏览器 | 计算值 | 布局值 | | --- | --- | --- | | Safari | 33,554,428 | 33,554,428 | | Chrome | 33,554,400 | 33,554,400 | | Firefox (Nightly) | 19.2 / 17,895,700 | 19.2 / 8,947,840 † |

† 高度 / 宽度

Chrome和Safari的值都非常接近2^25-1（33,554,431），Safari比这个值少了3像素，而Firefox少了31像素。我无法猜测为什么会有这样的限制，或许这与早期的24位值有关，但具体原因不得而知。

Firefox的表现更加奇怪。首先，计算出的高度是19.2px，这是默认字体大小和行高下的文本行高度。如果我明确设置line-height: 1，<div>的高度会变为16px。尽管我设置了无限像素的高度，但浏览器似乎直接忽略了这一设置，而不是将其限制在某个上限。

接下来，我测试了字体大小的表现：

css div { width: calc(infinity * 1px);  height: calc(infinity * 1px); margin: 0; padding: 0; font-size: calc(infinity * 1px); }

结果同样令人困惑：

| 浏览器 | 计算值 | 布局值 | | --- | --- | --- | | Safari | 100,000 | 100,000 | | Chrome | 10,000 | 10,000 | | Firefox (Nightly) | 3.40282e38 | 2,400 / 17,895,700 † |

† 行高值为 normal /1

Safari和Chrome都设置了明显的硬限制，Safari的限制是Chrome的10倍。而Firefox的计算值是一个32位单精度浮点数，但实际渲染的字体大小却是2,400像素。

最后，我尝试将line-height设置为无限像素：

css div { line-height: calc(infinity * 1px); }

结果与之前的宽度测试类似：

| 浏览器 | 计算值 | 布局值 | | --- | --- | --- | | Safari | 33,554,428 | 33,554,428 | | Chrome | 33,554,400 | 33,554,400 | | Firefox (Nightly) | 17,895,700 | 8,947,840 |

总的来说，Safari和Chrome的值接近2^25-1，而Firefox的计算值和渲染值之间存在奇怪的差异。

这次探索让我对无限像素值有了更多的疑问，但我的大脑需要休息。如果你有更多关于无限值的测试想法，欢迎告诉我。我已经开始思考如何在z-index之外使用calc(-infinity)来制造更多有趣的效果了。

评论总结

  1. CSS的历史与现状：

    • RoryH提到，文章让他回想起20年前使用各种复杂的CSS技巧来应对浏览器兼容性的时代，相比之下，现在的CSS更加规范和易于使用。
      • 引用："This article triggered flashbacks to 20 years ago and using all sorts of crazy CSS to hack the browser to do what you needed it to. Nowadays CSS is (usually) a remarkable land of sanity in comparison."

  2. 浏览器渲染引擎的相似性：

    • maxloh指出，Chrome的Blink引擎是从WebKit分叉出来的，因此两者在支持“infinity”值时的行为相似。
      • 引用："Blink, Chrome's rendering engine, was forked from WebKit (Safari) in 2013. Since WebKit already supported the infinity value at the time of the fork, it's highly probable that they share the same underlying code."

  3. 浏览器渲染限制与解决方案：

    • breckognize分享了他们在开发浏览器电子表格时遇到的文档高度限制问题，最终通过使用Canvas渲染和自定义滚动条来解决。
      • 引用："We tried to use an off-screen div to take advantage of the browser's native scrollbars but ran into document height limits. The solution was to do rendering in canvas and draw the scrollbars ourselves."

  4. 写作风格与多样性：

    • echelon评论了文章中的写作风格，认为其充满了戏剧性和热情，虽然与常见的简洁风格不同，但为读者提供了多样化的视角。
      • 引用："There is a software engineering equivalent of the 'theater kids' meme, and this is it. There's an abundance of exuberance in this writing."

  5. CSS中“infinity”的实际用途：

    • calibas提出了对CSS中“infinity”值实际用途的疑问。
      • 引用："What's the actual use case for 'infinity' in CSS?"

  6. 浏览器对CSS高度的处理：

    • chrismorgan详细解释了Firefox和WebKit在处理CSS高度时的不同机制，特别是Firefox对超过特定值的高度声明的处理方式。
      • 引用："Firefox simply ignores height declarations that resolve to a value greater than exactly 17895697px. WebKit-heritage browsers use a 1⁄64 pixel layout unit instead."

  7. WebKit的LayoutUnit机制：

    • samweinig补充了WebKit中LayoutUnit的使用，解释了其固定点表示法及其对CSS长度值计算的影响。
      • 引用："LayoutUnits use a fixed point representation where the smallest unit is 1/64 of a pixel."