奇怪的 Microsoft Edge上的高度错误，带有“display：table”子元素

Question

所以我有这个简单的代码，可以在Chrome上完美运行：

.section-sub-desc-list {
    margin: 0px;
    font-weight: normal;
    list-style-type: square;
}

.display-table {
    display: table;
    width: 100%;
}

.display-table-cell {
    display: table-cell;
}

.time-interval {
    display: table-cell;
    width: 30%;
    text-align: right;
    font-style: italic;
    font-weight: normal;
}

<ul class="section-sub-desc-list">
    <li>
        <div class="display-table">
            <div class="display-table-cell">
              B.S. Computer Science
            </div>
            <div class="time-interval">
              Oct 2010 - Jun 2014
            </div>
        </div>
    </li>
</ul>

单击运行按钮会显示预期结果，但这是它在Edge上呈现的方式：image

问题是在“li”标签上添加了额外的高度，但我不知道是什么原因以及如何修复它。

Answer 1

好吧，我一直在考虑显示属性，我终于让它在Edge上工作了。

这是新代码：

.section-sub-desc-list {
  margin: 0px;
  font-weight: normal;
  list-style-type: square;
}

.display-table {
  display: inline-flex;
  width: 100%;
}

.display-table-cell {
  width: 100%;
}

.time-interval {
  white-space: nowrap;
  text-align: right;
  font-style: italic;
  font-weight: normal;
}

<ul class="section-sub-desc-list">
  <li>
    <div class="display-table">
      <div class="display-table-cell">B.S. Computer Science</div>
      <div class="time-interval">Oct 2010 - Jun 2014</div>
    </div>
  </li>
</ul>

一些评论

• 包装div（display-table）上的display: inline-flex; width: 100%与编写display: flex是一回事。为什么我使用inline-flex方法？因为如果我只是在包装器上使用display: flex属性，Edge仍然会弄乱高度，原因不明。
• 在B.S.上使用width: 100%计算机科学文本div不会使它填满整行，因为我们现在正在使用flex项，因为父（display-table）是一个flex容器。至少这是我认为flex项目的工作方式。
• 我在时间间隔文本上使用了white-space: nowrap属性，因为它会因未知原因而回绕