CSS网格对齐 - 项目：基线不在野生动物园工作答案

【问题标题】：CSS Grid align-items: baseline not working in SafariCSS网格对齐 - 项目：基线不在野生动物园工作
【发布时间】：2019-03-01 08:40:52
【问题描述】：

我遇到了一个问题，“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;
}

【问题讨论】：

您是否检查过 align-items 的其他值是否在 Safari 中有效？
位置对齐（开始、中心、结束）似乎有效，但没有基线对齐。我正在使用最新的 Safari 更新。
webkit 存在一个已知问题：bugs.webkit.org/show_bug.cgi?id=199648。虽然可能不完全是问题，但它可能是相关的。

标签： css safari css-grid text-align

【解决方案1】：

我也遇到过类似的问题，在当前版本的 Safari (12.0.3) 中，align-items: end; 和/或 align-items: center; 无法正常工作。

不过，在对此进行测试时，我确实发现align-content: end; 在 Safari 中对我有用，并且似乎在 Firefox 中没有造成问题。您可能想尝试一下，但请检查它是否会破坏您的布局，尤其是对于响应式断点。

【讨论】：