3

問題のプレゼンテーションは次のとおりです。「コンテンツ」四角形をクリックするとdisplay: table-cell、pre-contentdiv が切り替わります。IE10 と FF24 では赤い線がまったく表示されませんが、chrome 30 では表示されます。

フルウィンドウ アプリケーションでドッキング可能なパネルを作成しようとしています。これは上に浮かんでいるか、2 つの列のいずれかであり、クラスを切り替えてパネルをドッキングしていposition: absoluteますdisplay: table-cell。

なぜ、このような行動の違いが生じるのでしょうか? これを修正する方法はありますか？

4

1 に答える 1

1

#pre-contentデフォルトで仕切りがブロックとして表示されていることが原因のようです。何らかの理由で、これは 11px の幅を持っています (理由はわかりませんが)。

Chrome 要素インスペクターの例

何を達成しようとしているのかわかりませんが、代わりにデフォルトでまったく表示しないように設定することはできませんか?

#pre-content:not(.table-cell) {
    display: none;
}

JSFiddle デモ。

IDはnot()クラスよりも特異性が高く#pre-content、.table-cell.

于 2013-10-31T15:08:27.970 に答える