嵌套，样式化的跨度在Chrome / Firefox中呈现不同：错误或功能？

Question

以下简短的HTML在Chrome和Firefox上的渲染方式完全不同。 http://jsfiddle.net/aoh4fa50/8/

<span><span style="border-right: solid 1px black;"></span>A</span>

在Firefox中，我得到了我所期望的，A左边的垂直条。（Ff 28.0和31.0，Mac 10.9.4）

在Chrome中，根本没有竖条（v32.0.1700.19 beta）。 （和Safari 7.0.6（9537.78.2）的行为类似于Chrome。）但如果您进行以下任何（看似无关紧要的）更改，则Chrome会显示垂直条：

• 将内部跨度移动到A之后（显然，在这种情况下，A显示在A之后）
• 删除外跨区标签插入（然后条形图出现在应有的位置）
• 内跨距左侧的一个字符（显然该字符显示在该字符后面）

我做错了什么，并且有一种简单的方法可以让所有浏览器始终显示内部边框的边框？如果没有，这是一个Chrome错误，我很高兴报告。

Answer 1

这是因为Chrome不会将任何样式应用于空元素的DOM元素，并且它的存在不会真正影响页面上的任何其他组件。

所以，如果你在第一个跨度上添加一些实际上有边框的东西，它就会修复。

例如，您可以通过向 元素

添加span来添加1个空格

见这里：http://jsfiddle.net/aoh4fa50/9/

<span><span style="border-right: solid 1px black;">&nbsp;</span>A</span>

希望，我能够解释我的想法。

顺便说一下，为什么你需要额外的空DOM元素才能在左边添加边框？

您可以这样做以获得相同的输出

<span style="border-left: solid 1px black;">A</span>

Answer 2

跨度内部没有任何内容。 Chrome实际上是我所期待的。如果您执行此类操作，则会在Chrome中看到某些内容。

<span><span style="border-right: solid 1px black;">&nbsp;</span>A</span>

那个非常怪异的@Ishita - 你写了确切的行：）

编辑：

您可以这样做以使其在所有浏览器中保持一致：

<span><span style="border-right: solid 1px black; display:inline-block; height:12px;"></span>A</span>