1
此錯誤只發生在Safari中，我不知道如何解決此問題。當屏幕尺寸發生變化時，Safari無法正確對齊div
我有一個樣式的div在Chrome中看起來像這樣，當屏幕是特定的大小時。請注意，所有的藍色B的對齊的正確彼此：
用幾乎相同的屏幕尺寸完全相同的DIV看起來像這樣在Safari：
注意如何藍色「B」在Safari示例中未對齊，但在Chrome示例中保持對齊狀態。另外值得注意的是，如果屏幕尺寸更寬，則不會發生此問題。下面的截圖也從野生動物園拍攝，其中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>