Эта ошибка возникает только в Safari, и я не знаю, как ее обойти.Safari не выравнивает divs правильно при изменении размера экрана
У меня есть стиль div, который выглядит так в Chrome, когда экран имеет определенный размер. Обратите внимание, что все Совместите синий Б правильно совпадают друг с другом:
Точно такой же ДИВ с почти таким же размером экрана выглядит в Safari:
Обратите внимание, как синий «B» не выровнен в примере Safari, но остается выровненным в примере Chrome. Также стоит отметить, что эта проблема не возникает, если размер экрана намного шире. Следующий скриншот был также взят из Safari, где B выровнен правильно между всеми тремя рядами:
То, что кажется, происходит то, что Safari будет играть быстро и свободно с окраин DIV, если один из внутренние элементы div содержат текст и горизонтально выровнены с другими div.
Как мне настроить «Bs» все время в Safari?
HTML/CSS, используемый в изображениях выше показано ниже для справки:
/* Styles go here */
.goal {
background-color: white;
border-color: #23b389;
border-style: solid;
border-width: 1px 1px 1px 20px;
margin: 20px 0 0 20px;
}
.clickable {
cursor: pointer;
}
.item-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: inline-flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width:100%;
align-items: center;
justify-content: space-between;
}
.item-container > :not(:first-child) {
padding:20px;
}
.item-container > :last-child {
padding-left:0px;
}
.collapse-expander {
margin: auto 0 auto -20px;
color: black;
font-size: 20px;
cursor: pointer;
}
.text {
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
flex-grow:1;
}
.standard-icon {
color: #1aa8de;
font-size: 22px;
cursor: pointer;
}
.menu-icon {
color: #1aa8de;
font-size: 22px;
cursor: pointer;
position: relative;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<br>
<br>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable text">This is an awesome paragraph! I love this paragraph so much that I will just keep typing and typing and typing whenever I want. This is so cool.</div>
<div class="menu-icon">
C
</div>
<div class="menu-icon">
D
</div>
</div>
</div>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable text"> is so cool.</div>
<div class="menu-icon">
C
</div>
<div class="menu-icon">
D
</div>
</div>
</div>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable text">his is so cool.</div>
<div class="menu-icon">
C
</div>
<div class="menu-icon">
D
</div>
</div>
</div>
</body>
</html>