iPad Safari 在 flex 项目过大时忽略边距-解网

问：

我有几个 flex 容器，每个容器有 3 个 flex 项目。前两个 flex-item 有一个，它们彼此之间以及与第三个 item 隔开。前两项总是很短（在本例中是恒定宽度），第三项具有可变宽度（可以长到足以换行）。margin-right

下面是一个示例（在 Chrome 中看起来不错，在 iPad 上就不那么好了）

li {
  display: flex;
  display: -webkit-flex;
}

.one, .two {
  margin-right: 10px;
}

<ul>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias dolore in, nam neque facilis nulla eum beatae, excepturi fugiat.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor.</span>
  </li>
</ul>

这在几乎所有浏览器中都很好用（我省略了 -ms- 前缀，因为它们与此问题无关），但在 iPad 的 Safari 中（特别是运行 Safari 8 的 iPad Air 2，也许是其他浏览器），当第三项试图变大时，边距被完全忽略，前两项被混在一起。

预期

实际

这闻起来很像 Safari 中的错误，但我在网上找不到任何错误报告或讨论。它在几乎所有其他浏览器中的行为都符合预期。我试过摆弄几乎所有的属性，但无济于事。flex-

我首先在寻找解决方法，然后也在寻找为什么会发生这种情况的解释。

HTML CSS Safari FlexBox

iPad Safari 在 flex 项目过大时忽略边距

iPad Safari ignores margins when flex item gets too large

预期

实际

评论

评论