奇怪的 <li> 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"> BS Computer Science </div> <div class="time-interval"> Oct 2010 - Jun 2014 </div> </div> </li> </ul> 

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

问题是在“ li”标签上增加了额外的高度，但是我不知道是什么原因以及如何解决这个问题。

Answer 1

好的，我一直在考虑display属性，终于在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">BS Computer Science</div> <div class="time-interval">Oct 2010 - Jun 2014</div> </div> </li> </ul> 

一些评论

• display: inline-flex; width: 100% display: inline-flex; width: 100%包装器div（ display-table ）上的display: inline-flex; width: 100%与仅编写display: flex 。 为什么要使用inline-flex方法？ 因为如果出于某些未知原因，如果我仅使用包装器上的display: flex属性，Edge仍然会弄乱高度。
• 在BS Computer Science文本div上使用width: 100%不会使其填满整个行，因为我们现在正在处理flex项，因为parent（ display-table ）是一个flex容器。 至少我认为弹性项目是这样工作的。
• 我在时间间隔文本上使用了white-space: nowrap属性，因为由于未知的原因它会回绕