Question

我正在尝试在CSS中创建一个包含图标A，B和C的div以及一些将包装的文本。每个div中的所有图标和文本必须与其他div中的图标和文本对齐。我目前正在使用flexbox来实现这一目标。

请看下面的图片，并注意当Chrome在Chrome中显示时，div之间的图标A，B和C都是垂直对齐的：

在Safari中，图标A，B和C都正确放入容器内，除非文本太宽。请注意，带有短文本的第二个和第三个div在Safari中是垂直对齐的，而不是包含较长文本的div：

如何让div在Safari中正确对齐？就像在Chrome中一样？

为方便起见，这是Plunker。

以下是代码：

＆＃13;

/* Styles go here */

.goal {
  background-color: white;
  border-color: #23b389;
  border-style: solid;
  border-width: 1px 1px 1px 20px;
  min-height: 60px;
  margin: 20px 0 0 20px;
  display: flex;
  justify-content: space-between;
}

.clickable {
  cursor: pointer;
}

.item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
}
.item-container .collapse-expander {
  margin-left: -20px;
  color: white;
  font-size: 20px;
  cursor: pointer;
}
.item-container > :not(.collapse-expander) {
  margin: 1px 20px;
  max-width: 100%;
}
.item-container > :not(.collapse-expander):not(:last-child) {
  margin-right: 0;
}
.text {
  font-weight: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.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">
        <span class="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.
        </span>
      </div>
    </div>
    <div class="item-container">
      <div class="menu-icon">
        C
      </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">
        <span class="text">
This is an awesome paragraph!  
        </span>
      </div>
    </div>
    <div class="item-container">
      <div class="menu-icon">
        C
      </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">
        <span class="text">
Another awesome paragraph!
        </span>
      </div>
    </div>
    <div class="item-container">
      <div class="menu-icon">
        C
      </div>
  </div>
</div>

  </body>

</html>

＆＃13;

更新3/23/16：

仍然没有运气。我已经修了一段时间，似乎没有任何工作。我甚至尝试过更新Safari，但这个bug仍然存在。

更新

发现问题很可能是由于Safari在屏幕调整大小时没有正确改变文本div的宽度，而Chrome会这样做。我通过在.clickable类上定义max-width属性测试了这个假设，我在Safari中得到了以下结果：

这并没有解决我的问题，因为我确实需要动态更改宽度才能正确装入容器，但它确实提供了一些关于为什么在Safari中出现此问题的线索。

更新

更多地修补它，虽然我没有完美的解决方案，但我确实有一个解决方案可以阻止图标移出div。请查看以下plunker。

如何阻止Safari在容器

0 个答案: