div выравнивание в сафари & ios хром

95
13

Я перепрограммировал мой сайт, чтобы быть отзывчивым, и пытался понять эту вещь в течение недели, поэтому заранее заблаговременно.

У меня есть, по сути, четыре "блока" на главной странице, показывающие как сетку 2x2 на экранах планшетов/настольных компьютеров. Когда они сокращаются до мобильной компоновки, они становятся вертикальной сеткой 1x4. Простой и все, кажется, работает на всех небольших мобильных экранах. Все отлично работает на Chrome, Firefox, IE на настольном компьютере и Android.

В любой версии Safari с экраном iPad или больше сетка 2x2 не выровнена. В частности, нижний правый блок с img вместо названия составляет около 10 пикселей, сдвинутых вниз. Интересно, что Chrome на iPad также делает это. Я читал, что Chrome на iOS использует механизм Safari, так что это может указывать на проблему с сафари-движком.

Я почти уверен, что проблема связана с интервалом между заголовками в четырех div, но я просто не могу понять эту штуку, хотя кажется, что это должно быть легко.

html {
height: 100%;
margin: 0 auto;
width: 100%;
height: 100%;
}

body {
background-color: #f0f0f0;
margin: 0 auto;
height: 100%;
width: 100%;
}

div.sitecontainer {
margin: none;
width: 100%;
}

div.blocks {
position: relative;
margin: 0 auto;
padding: 10px;
display: block;
font-family: 'Lusitana', serif;
font-size: 100%;
font-weight: 700;
width: 700px;
max-width: 89%;
text-align: center;
}

div.indexBlock {
position: relative;
height: 170px;
width: 300px;
margin: 10px;
display: inline-block;
background-color: #ffffff;
font-family: 'Lusitana', serif;
font-size: 16px;
font-weight: 400;
text-align: left;
overflow: hidden;
}

div.indexBlock a {
padding: 10px;
display: block;
}

div.blockTitle {
font-family: 'Lusitana', serif;
font-size: 20px;
font-weight: 500;
text-decoration: none;
text-align: left;
color: #1a66ff;
}

img {
max-width: 100%;
border: none;
}

<html>

<body>
<div class="siteContainer">

<div class="blocks">

<div class="indexBlock">
<a href="https://google.com">
<div class="blockTitle"><b>Title Title Title Title Title </b></div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</a>
</div>

<div class="indexBlock">
<a href="https://google.com">
<div class="blockTitle"><b>Title Title Title Title Title </b></div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</a>
</div>

<div class="indexBlock">
<a href="https://google.com">
<div class="blockTitle"><b>Title Title Title Title Title </b></div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</a>
</div>

<div class="indexBlock">
<a target="blank" href="http://www.google.com/">
<img src="" alt="this block has an image in place of its title">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</a>
</div>

</div>
</div>
</body>

</html>

спросил(а) 2018-03-07T23:05:00+03:00 1 год, 11 месяцев назад
1
Решение
88

Это должно быть связано с вычисленной базой, и последнее упоминание в спецификации, которое я видел явно, "не определяет позицию базовой линии строки".

Таким образом, Safari, по-видимому, вычисляет положение базовой линии по-разному. Вы можете проверить это, изменив vertical-position вашего изображения на другое значение, например, top или bottom, и это, как видно, очистит все.

По существу, похоже, что img (display: inline) и родительский контейнер (display: inline-block) плохо взаимодействуют на основе расчета базовой линии. Лучше всего это может изменить изображение для display: block, который является общим исправлением проблем выравнивания.

ответил(а) 2018-03-07T23:55:00+03:00 1 год, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема