html - 嵌套、样式化的跨度在 Chrome/Firefox 中以不同方式呈现 : bug or feature?

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 之后)
• 删除外部 span 标签插入(然后栏出现在它应该出现的位置)
• 内部跨度左侧的一个字符(显然该条显示在该字符之后)

我做错了什么吗？有一种简单的方法可以使内部跨度的边框在所有浏览器上一致显示吗？如果不是，这是一个 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>