CSS 网格对齐元素 : baseline not working in Safari

Question

我遇到了一个问题，其中“align-item: baseline;”在 Safari 中不起作用。它适用于 Chrome 和 Firefox。这是错误还是我遗漏了什么？

代码笔: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 中似乎没有产生问题。您可能想尝试一下，但要检查它是否会破坏您的布局，尤其是响应式断点。