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

【问题标题】：jQuery tablesorter - couldn't attach background gradient image to the header row in IEjQuery tablesorter - 无法将背景渐变图像附加到 IE 中的标题行
【发布时间】：2012-02-13 12:46:41
【问题描述】：

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>

【问题讨论】：

标签： jquery tablesorter

【解决方案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，因为 mod 中的更改已添加到 tablesorter version 2.0.5。

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

【讨论】：

谢谢@fudgey。很抱歉延迟回复，我听从了你的建议，我快到了。唯一的问题是，标题跨度覆盖了标题文本，因此方向箭头位于文本顶部。不知道如何在标题文本的右侧显示。

【解决方案2】：

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

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

更多信息请见here

【讨论】：