CSS Grid align-items：基线在Safari中不起作用

Question

我遇到过“align-item：baseline;”的问题。在Safari中无效。它适用于Chrome和Firefox。这是一个错误还是我缺少的东西？

Codepen：https://codepen.io/NewbCake/pen/yxdqZK?editors=1100#

HTML

<section class="grid">
  <ul class="item_1">
    <li>detail 1</li>
    <li>detail 2</li>
    <li>detail 3</li>
  </ul>
  <p class="item_2">Ovid unturib uscium quidel ium Illatquibusam aut elessin velest, ium sim ea nulliqui deribus andam, coriam enem eatiur?</p>
</section>

CSS

.grid {
  display:grid;
  grid-template-columns:15ch 40ch;
  align-items:baseline;
}

.item_1 {
  grid-column:1;
  font-size:1rem;
  line-height:1;
  border:1px solid red;
}

.item_2 {
  grid-column:2;
  font-size:1.25rem;
  line-height:1.2;
  border:1px solid red;
}

Answer 1

我遇到过类似的问题，也有当前版本的Safari（12.0.3），其中align-items: end;和/或align-items: center;无效。

然而，在测试中，我确实发现align-content: end;在Safari中为我工作，并且似乎没有在Firefox中产生问题。您可能想尝试它，但检查它是否会破坏您的布局，尤其是响应断点。