2

私のフィドルには、テーブル ヘッダーに並べ替えインジケーターを表示する方法の例が 3 つあります。

折りたたまれていないヘッダー

私の問題は 3 列目にあります。省略記号に縮小すると、Chrome ではソート インジケーターが非表示になり、IE ではテキストの上に配置されます。

クロム

つぶれたクローム

IE

ここに画像の説明を入力

並べ替えインジケーターをキャプションにぴったりと合わせ、省略記号を表示するときに表示したままにする方法はありますか (2 番目の列と同様)。

インジケーターを独自のスパンに分割しようとしましたが、キャプションが折りたたまれたスパンを取得できないようです。

4

1 に答える 1

1

私にとっては、これは Chrome よりも IE の方が目立つようです。これを回避する 1 つの方法は、CSScontentプロパティを使用してソート インジケーターをそこに移動し、.indicator-right クラスから background-image を削除することです。

jsFiddle の例

CSS

.indicator-right:after {
    content:url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
}
于 2012-06-27T17:00:12.653 に答える