CSS-сетка align-items: baseline не работает в Safari - PullRequest
Новая
       50

CSS-сетка align-items: baseline не работает в Safari

0 голосов
/ 25 сентября 2018

Я столкнулся с проблемой, где "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;
}

1 Ответ

0 голосов
/ 15 марта 2019

Я сталкивался с подобными проблемами, в том числе с текущей версией Safari (12.0.3), где align-items: end; и / или align-items: center; не работают.

При тестировании этого, хотяЯ обнаружил, что align-content: end; работает для меня в Safari и, похоже, не создает проблем в Firefox.Вы можете попробовать его, но проверьте, не нарушает ли он макеты, особенно для отзывчивых точек останова.

...