屏幕大小更改时，Safari 无法正确对齐 div答案

【问题标题】：Safari not aligning divs correctly when screen size changes屏幕大小更改时，Safari 无法正确对齐 div
【发布时间】：2017-02-09 03:41:11
【问题描述】：

这个错误只发生在 Safari 中，我不知道如何解决它。

当屏幕为特定尺寸时，我有一个样式化的 div，在 Chrome 中看起来像这样。请注意，所有蓝色 B 都彼此正确对齐：

屏幕大小几乎相同的完全相同的 div 在 Safari 中看起来像这样：

请注意蓝色“B”在 Safari 示例中未对齐，但在 Chrome 示例中保持对齐。另外值得注意的是，如果屏幕尺寸更宽，则不会出现此问题。以下屏幕截图也是从 Safari 中截取的，其中 B 在所有三行之间正确对齐：

如果 div 的内部元素之一包含文本并且与其他 div 水平对齐，则 Safari 将在该 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>

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

通过在可点击的文本 div 上添加 100% 的宽度来修复。

.clickable.text {
   width: 100%;
}

【讨论】：

【解决方案2】：

问题在于您对 flexbox 中弹性项目的属性不够具体，因此弹性项目的比例是模棱两可的，并且存在因内容不同而无法预测的风险。

不要只在.text 上使用flex-grow: 1;，而是尝试将其更改为flex: 1 0 75%;，以指定flex-basis。

【讨论】：