Question

此错误仅发生在Safari中，我不知道如何解决它。

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

具有几乎相同屏幕尺寸的完全相同的div在Safari中看起来像这样：

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

似乎正在发生的事情是，如果div中的一个内部元素包含文本并与其他div水平对齐，则Safari将以div的边距快速松散地播放。

如何制作＆＃39; Bs＆＃39;在Safari中对齐所有的时间？

以上图片中使用的html / css如下所示：

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

.clickable.text {
   width: 100%;
}

Answer 2

问题在于，您对弹性箱中弹性项目的属性不够具体，因此弹性项目的比例不明确，并且存在不同内容无法预测的风险。

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

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

2 个答案: