我在 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>'s 标记为display:inline-block+float:left, - 设置
.c为white-space:nobreak,
但结果都是一样的。
如果我将 ' 包装在另一个中并将其设置为，它确实有效，但由于and首先使我的 DOM 脚本编写变得更加容易，我宁愿不引入任何新元素。<b><span>display:table-row:before:after
以前有没有人遇到过这个问题并提出解决方案？