1

テーブルがあり、ヘッド列の 1 つをクリックすると、データがそれぞれソートされます。列をクリックすると、列名 (ライン スタイル イメージ) の前に矢印が表示されます。列名が長すぎて、列をクリックして並べ替えを行うと、 が設定されていると、画像がテキストの上に表示white-space: normalされます。これは私が期待するものです。これは Chrome と IE で発生することですが、Firefox v11 以降では発生しません。Firefox では、画像の矢印がテキストの前の境界を超えて<th>います。Chrome や IE のように Firefox でこれを機能させるための提案はありますか?

ここにサンプルがあります:
HTML

<table class="tableCustom" cellspacing="0" cellpadding="0" border="0">
    <thead>
        <tr>
            <th class="tableValue sorting_asc">
                <ul>
                    <li>Some unnecesseary long Column Name</li>
                </ul>
            </th>
        </tr>
    </thead>
</table>

<br> CSS 

th.tableValue {
    background-color: #8DA7BE;
}

th, th.tableValue {
    background-position: center top;
    background-repeat: repeat-x;
    border: 1px solid #8DA7BD;
    color: #FFFFFF;
    font-size: 9pt;
    height: 33px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    white-space: normal;
}

.tableValue {
    color: #728DAB;
    text-align: center;
    white-space: normal;
    width: 100px;
}

.sorting_asc {
    list-style-image: url("../img/sort-asc.gif");
    list-style-position: inside;
    list-style-type: inherit;
}

</p>

4

1 に答える 1

2

reset.css を使用していますか?? そうでない場合。

ここには、reset.css の多くのリンクがあります。

問題が解決しない場合は、 jsFiddleを提供してください

編集::: reset.css を使用する理由は、すべてのユーザー エージェント (ブラウザー) css を基本設定にするため、異なるブラウザーで異なって見えないようにするためです。

于 2012-06-12T11:51:39.607 に答える