Question

jQuery 1.7.1，tablesorter，IE 8 - 我的表已经启用了使用tablesorter插件进行排序。 Tablesorter插件为标题行中的每个单元格附加背景图像（向上和向下箭头）。我尝试将渐变图像附加到标题行，它在Chrome和Firefox中有效，但在IE8中没有。在IE中一起显示渐变和另一个图像（向上和向下箭头）的方法吗？

HTML

<thead>
   <tr class="header">
    <th align="center">No</th>
    <th align="center">NAME</th>
   </tr>
</thead>

CSS（渐变由我提供）

<style type="text/css">
 .header {
   background: url('images/bl.gif') repeat-x;
 }
</style>

CSS（作为tablesorter插件的一部分）

table.tablesorter thead tr .header {
   background-image: url(images/bg.gif); /* up and down arrow */
   background-repeat: no-repeat;
   background-position: center right;
   cursor: pointer;
}

更新的：根据@fudgey建议

修改了我的代码

CSS（作为tablesorter插件的一部分）

table.tablesorter thead tr .header span{
   background-image: url(images/bg.gif); /* up and down arrow */
   background-repeat: no-repeat;
   background-position: center right;
   cursor: pointer;
}
table.tablesorter thead tr .headerSortUp span{
  background-image: url(images/asc.gif);
  background-repeat: no-repeat;
}
table.tablesorter thead tr .headerSortDown span{
  background-image: url(images/desc.gif);
  background-repeat: no-repeat;
}

此外，我略微修改了fudgey代码，

$('#myTable1').tablesorter( 
{
   onRenderHeader: function (){
      this.wrapInner('<span class="grdimg"></span>');
   }
});

并添加了一些基于this的CSS，

<style type="text/css">
 .grdimg{
    float:left; width:100%; min-width:100%;
 }
 </style>

Answer 1

有一个名为onRenderHeader的未记录选项，允许您添加/包装表头单元格内容。使用可以如下使用：

onRenderHeader: function (){
  $(this).wrapInner("<span></span>");
}

然后将css修改为方向箭头的范围，将背景的实际表格单元格与此类似（未经测试;它只是为了给您提示）：

table.tablesorter thead th span {
  float: right;
  display: block;
  width: 25px;
  height: 10px;
}
table.tablesorter thead tr .headerSortDown span {
  background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortUp span {
  background-image: url(asc.gif);
}

这是original demo。由于mod中的更改已添加到tablesorter version 2.0.5，因此您无需下载该mod。

如果您感兴趣，该mod包含cssChildRow选项，该选项也添加到tablesorter v2.0.5并且也未记录。我有一个更深入的blog post here。

Answer 2

看起来IE不支持CSS2中的多个背景图像，除非您使用多层元素并为它们提供不同的背景图像。但是使用CSS3你可以试试这样的东西。

.multipleBackgroundImages { 
  background-image: url(images/bl.gif); 
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.gif', sizingMethod='crop')"; 
}

有关此问题的更多信息，请here

jQuery tablesorter - 无法将背景渐变图像附加到IE中的标题行

2 个答案: