1
我正在Safari 5.1.7（在Windows上）測試，並且令人驚訝的是我沒有在Chrome中遇到同樣的問題。也適用於FF19和IE9。Safari使用以下方式將塊內嵌爲塊：之前和之後：作爲顯示的僞元素：錶行
我想對齊<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
下面
代替（如在所有其他的瀏覽器）：
以上
WORD1WORD2
下面
這裏是一個演示：http://jsfiddle.net/3LuHx/11/
我試過
table-row代替table-header-group/table-footer-group，- 來標記
<b>作爲display:inline-block+float:left小號的明確地作爲inline !important， - 到
<b>標記'， - 設置
.c到white-space:nobreak，
但所有結果都一樣。
它確實工作，如果我在另一個<span>包裹<b>的並將其設置爲display:table-row，但由於在首位的:before和:after使我的DOM腳本就輕鬆多了，我寧願不引入任何新元素。
有沒有人有這個問題，並提出了一個修復？
這適用於我在Safari 6 + Chrome'.c {display：inline-block; vertical-align：middle; }' – Duopixel 2013-03-09 19:00:03