Safari将内联呈现为块，其中：before和：after伪元素为display：table-row

Question

我正在测试Safari 5.1.7（在Windows上），令人惊讶的是我在Chrome中没有遇到同样的问题。也适用于FF19和IE9。

我正在尝试在<span>内的单词上方和下方对齐两段文字。它可以工作，但只要我的<span>包含其他内联元素，它们就会分开排列。

以下是代码：

.c { display: inline-table; vertical-align: middle; }
.c:before { content: 'above'; display: table-header-group; }
.c:after { content: 'below'; display: table-footer-group; }

正常工作：<span class="c">word</span>，呈现为
上述
字
下面

不起作用：<span class="c"><b>word1</b><b>word2</b></span>，呈现为
上述
WORD1
WORD2
下面

而不是（与所有其他浏览器一样）：
上述
WORD1 WORD2
下面

以下是演示：http://jsfiddle.net/3LuHx/11/

我试过了

• table-row代替table-header-group / table-footer-group，
• 将<b>明确标记为inline !important，
• 将<b>标记为display:inline-block + float:left，
• 将.c设置为white-space:nobreak，

但所有结果都相同。

如果我将<b>包装在另一个<span>中并将其设置为display:table-row， ，但是:before而:after首先使我的DOM脚本变得更加容易，我宁愿不介绍任何新元素。

之前是否有人遇到此问题并提出修复方法？

Answer 1

好吧，我最后用span插入额外的display: table-row - 似乎是唯一的解决方法。

Answer 2

我刚刚通过向元素添加float: left来修复此问题。希望有所帮助！