html - IE 根据内容改变元素排列

Question

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

如何在不需要删除点的情况下使 IE 回流跨越？

JS Fiddle 演示：内容中有点- 使用 IE
JS Fiddle 演示：没有点

PS如果<span>改成<li>问题依旧。

Answer 1

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

span {
    display:inline-block;
}

Answer 2

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

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

在你的小提琴中，添加：

span {
    display:inline-block;
}

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

它实际上并不能解决问题。它只是解决它，但就您的小提琴而言，它确实解决了问题。

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

Answer 3

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

例子：

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

span {
  display:inherit;     
}