Question

我遇到了一个问题，其中“ align-item：基线；”在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中没有出现问题。您可能想尝试一下，但是请检查它是否破坏了您的布局，尤其是对于响应性断点。

CSS网格对齐项：基线在Safari中不起作用

1 个答案: