为什么 Firefox 和 Edge 对 Flex 项目的百分比填充和边距处理方式不同？

揭开 Firefox 和 Edge 中百分比填充和边距的神秘面纱

在 Flex 项目领域，百分比填充和边距的传奇让使用 Firefox 和 Edge 的开发者感到困惑。虽然 Chrome 运行良好，但这些浏览器表现出的特殊行为让我们摸不着头脑。

根据 Flexbox 规范，Flex 项目在填充或边距百分比方面可能有点难以预测。这是问题的根源：

多种边距/填充解决机制：

Flexbox 规范在计算这些维度的百分比时允许两种可能的解释：

1. 基于轴的分辨率： 百分比是相对计算的到项目自己的轴（例如，宽度为左/右，高度为顶部/底部）。
2. 内联轴分辨率：所有百分比都是相对于项目的内联轴计算的（即，宽度）。

Firefox 和 Edge 采用了不同的做法，导致了它们的不一致 行为。这种变化源于浏览器对分辨率机制的选择，导致以下结果：

Firefox 的解释：

• 填充和边距的百分比根据行内轴，水平和垂直书写时始终为宽度

Edge 的解释：

• Firefox 尚未更新到最新的 Flexbox 规范，因此遵循旧版

解决方案：

为了确保所有浏览器的行为一致，请避免在 Flex 项目上使用百分比填充和边距。通过遵循这一重要建议，您可以避免跨浏览器不一致，否则可能会困扰您的代码。

以上是为什么 Firefox 和 Edge 对 Flex 项目的百分比填充和边距处理方式不同？的详细内容。更多信息请关注PHP中文网其他相关文章！