html - 带有 "display: table"子元素的 Microsoft Edge 上奇怪的 <li> 高度错误

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>

一些说明

• 显示:inline-flex；宽度:包装器 div 上的 100%(display-table) 和写 display: flex 是一样的。为什么我用 内联 flex 方法？因为如果我 出于某些未知原因，只需在包装器上使用 display: flex 属性即可。
• 在 B.S. 上使用 width: 100% Computer Science 文本 div 不会让它填满整行，因为我们现在正在处理 flex 元素，因为父级(显示表)是一个 flex 容器。至少这就是我认为 flex 元素的工作方式。
• 我在时间间隔文本上使用了 white-space: nowrap 属性，因为它会因未知原因环绕