IE根据其内容更改元素排列

Question

如果span内容在开头 <span>.filename</span>中包含点，则Internet Explorer将不会重排它们。

如何在不需要移除点的情况下制作IE回流间距？

JS Fiddle demo: with dots in content - 使用IE
JS Fiddle demo: without dots

P.S。如果<span>更改为<li>问题仍然存在。

Answer 1

我不知道为什么IE会以这种方式表现，但在你的情况下，你可以尝试使用

span {
    display:inline-block;
}

Answer 2

是的，你是对的。这看起来不错。

快速解决方案是将span元素的显示类型更改为inline-block。

在你的小提琴中，添加：

span {
    display:inline-block;
}

...在CSS面板中。这将使IE按预期工作。请参阅updated fiddle here。

它实际上并没有解决问题;它只是解决它，但就你的小提琴而言，它确实解决了这个问题。

希望它在您的实际网站中也适用于您（它应该这样做，但显然取决于您的页面布局; inline和inline-block的工作方式不同，因此有可能是一些奇怪的边缘情况）。

Answer 3

这是实现它的另一种方法： 在您的div中加入display:inline-block，然后通过继承div来将css应用于span标记。

示例：

<div style="background-color:black;display:inline-block;"> 

span {
  display:inherit;     
}