1

私は Safari 5.1.7 (Windows 上) でテストしていますが、驚くべきことに、Chrome では同じ問題は発生しません。FF19とIE9でも動作します。

内の単語の上下に 2 つのテキストを揃えようとしています<span>。それは機能しますが、 my に他のインライン要素が含まれるとすぐに<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-rowtable-header-group/の代わりにtable-footer-group、
  • <b>を明示的に としてマークするにはinline !important、
  • を+<b>としてマークするには、display:inline-blockfloat:left
  • に設定.cするにwhite-space:nobreakは、

しかし、すべて同じ結果になります。

をさらに別のものでラップしてに設定すると機能しますが、そもそもandによって DOM スクリプトが非常に簡単になったので、新しい要素を導入したくありません。<b><span>display:table-row:before:after

誰かが以前にこの問題を抱えていて、修正を思いつきましたか?

4

2 に答える 2

1

まあ、私はエクストラspanを挿入するdisplay: table-rowことになりました -- これに対する唯一の修正のようです。

于 2013-03-11T05:22:02.260 に答える
0

float: left要素に追加することでこれを修正しました。それが役立つことを願っています!

于 2016-08-16T08:40:51.907 に答える