IE 会根据元素的内容更改元素排列方式

Question

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

如何在不删除点的情况下使IE重排跨度？

JS小提琴演示：内容中有点 - 使用IE
JS小提琴演示：没有点

附言 如果<span>更改为<li>问题仍然存在。

Answer 1

是的，你是对的。这看起来确实不对。

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

在你的小提琴中，添加：

span {
    display:inline-block;
}

。在 CSS 面板中。这将使IE按预期工作。在此处查看更新的小提琴。

它

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

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

Answer 2

我不知道

为什么IE会以这种方式运行，但是在您的情况下，您可以尝试使用

span {
    display:inline-block;
}

Answer 3

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

例：

<div style="background-color:black;display:inline-block;"> 
span {
  display:inherit;     
}