带有列排序箭头的JQuery梯度头

Question

我一直试图找到一种适用于IE 7+和Firefox的方法来获取渐变列标题行，并在使用Jquery进行排序时显示向上/向下箭头。下面的示例表我可以在Firefox中工作，但IE不会显示箭头。任何人都知道如何让它为两者工作？

...表

<script>
    $(document).ready(function(){
        $("#dataTable").tablesorter({ 
            headers: sortClassAsc: 'headerSortUp',
            sortClassDesc: 'headerSortDown',
            headerClass: 'headerSort'
        });
    }); 
</script>

<table id="dataTable" class="dataTable">
    <thead>
        <tr><th>Col1</th><th>Col2</th></tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
    </tbody>
</table>

...的CSS

table.dataTable {
    font-size: 11px;
    background: #fff;
    border-collapse: collapse;
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid #8AB8E6;
    border-top: 1px solid #8AB8E6;
}

table.dataTable td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 3px 4px;
}

table.dataTable thead tr th {
    font-size: 12px;
    font-weight: normal; 
    padding: 4px;
    border-bottom: 1px solid #8AB8E6;
    color: #000;
    text-decoration: none;
    cursor: pointer;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0F4FC', endColorstr='#9BC5F4'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#E0F4FC), to(#9BC5F4)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #E0F4FC, #9BC5F4); /* for firefox 3.6+ */
}

table.dataTable .headerSort {
    background-image: url('../images/bg.gif'); 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.dataTable .headerSortUp {
    background-image: url('../images/asc.gif'); 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.dataTable .headerSortDown {
    background-image: url('../images/desc.gif'); 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}