为什么 Firefox 和 Chrome 渲染 Flexbox 的方式不同，如何修复？

Firefox 和 Chrome 中的 Flexbox 渲染差异

在 Web 开发领域，跨浏览器渲染问题可能会带来重大挑战。 Flexbox 用户面临的此类问题之一是在 Firefox 和早期版本的 Chrome 中观察到的不一致行为。

在 Chrome 47 中，“.scroll”div 按预期运行，利用 Flexbox 实现 100% 高度。然而，在 Firefox 中，相同的 div 遵循内容高度，导致不正确的滚动行为。这引发了针对这种渲染差异的跨浏览器解决方案的问题。

Flexbox 规范的修改（将 Flex 项目的默认最小大小设置为等于内容）导致了这种渲染差异。要解决此问题，开发人员可以通过显式将 min-width 和 min-height 设置为 0 来覆盖此默认值。

**.content {

background: yellow;
flex: 1;
display: flex;
flex-direction: column;

min-height: 0;           /* NEW */
min-width: 0;            /* NEW */

}
**

但是，Chrome 最近的更新带来了行为上的变化。 Chrome 48 模拟 Firefox 之前的渲染，导致相同的解决方案适用于两种浏览器。

CSS 2.1 中定义的 min-width 和 min-height 的初始 auto 值已替换为新的 auto value，它将最小大小设置为内容的大小。这引入了 Flexbox 元素的默认渲染行为的变化，导致浏览器之间观察到的不一致。

以上是为什么 Firefox 和 Chrome 渲染 Flexbox 的方式不同，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！