jQuery UI 图标通过 tablesorter CSS Sticky Header 流血答案

【问题标题】：jQuery UI icon bleeds through tablesorter CSS Sticky HeaderjQuery UI 图标通过 tablesorter CSS Sticky Header 流血
【发布时间】：2018-06-08 00:18:46
【问题描述】：

我有一个简单的 Web 应用程序，它使用 jQuery (v1.12.4)、jQuery UI (v1.12.1) 和 tablesorter 插件 (v2.30.5)。我也在使用 tablesorter CSS Sticky Header Widget，这就是我遇到问题的地方。

在应用程序的一个页面上，我显示了一个 HTML 表格，其中一列包含一个 jQuery UI 图标，该图标是指向另一个页面的链接。我使用 tablesorter CSS Sticky Header Widget 来保持表格标题行在页面滚动时可见。

我的问题是，当您向下滚动页面时，表格行开始移出浏览器窗口的顶部，每行中的 jQuery UI 图标会从粘性标题行中渗出，看起来很糟糕。

请注意，如果我将 jQuery UI 图标替换为 .png 文件中的图像，则不会出现问题。

当使用 jQuery UI 图标和 Firefox 作为我的浏览器时，我可以通过将 CSS z-index: 1 添加到表格的 <thead> 元素来获得所需的行为，即让图标消失在粘性标题后面。当使用 Internet Explorer 作为我的浏览器时，我可以通过将 CSS z-index: 1 放在有问题的列标题的 <td> 元素上来获得所需的行为。但是，我在使用 Chrome 时没有找到任何解决方案，而 Chrome 恰好是我的目标受众的首选浏览器。

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="jQuery/jquery-ui-themes-1.12.1/jquery-ui.min.css">
        <link rel="stylesheet" href="jQuery/tablesorter-master/css/theme.blue.css">
    </head>

    <body>
        <table id="table1">
            <thead>
                <tr>
                    <td>Column1</td>
                    <td>Column2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>r1c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r2c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r3c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r4c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r5c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r6c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r7c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r8c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r9c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r10c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
            </tbody>
        </table>

        <script src="jQuery/jquery-1.12.4.min.js"></script>
        <script src="jQuery/jquery-ui-1.12.1/jquery-ui.min.js"></script>
        <script src="jQuery/tablesorter-master/js/jquery.tablesorter.js"></script>
        <script src="jQuery/tablesorter-master/js/widgets/widget-cssStickyHeaders.js"></script>

        <script>
            $(document).ready(function() {
                $("#table1").tablesorter({
                    theme: "blue",

                    widgets: ["cssStickyHeaders"]
                });
            });
        </script>
    </body>
</html>

【问题讨论】：

标签： jquery-ui tablesorter

【解决方案1】：

“最简单”的解决方案是给图标一个负 z-index，然后从表格中删除所有背景颜色。这种方法的问题在于，如果要添加斑马条纹，则必须使用更复杂的方法来实现（查看css highlighting demo中的css）。

看看这个方法是否适合你（demo）：

.tablesorter-blue, .tablesorter-blue td {
  background: transparent;
}
.ui-icon {
  position: relative;
  z-index: -1;
}

【讨论】：

Mottie，您的“最简单”解决方案确实适用于我上面的简单测试程序。但是，我真正的 Web 应用程序使用 zebra 小部件，我无法快速弄清楚如何让条带化与您的解决方案一起使用。不过，我确实找到了两个简单的替代解决方案：1) 使用 Font Awesome 图标而不是 jQuery UI 图标，或者 2) 使用 tablesorter Sticky Header Widget 而不是 CSS Sticky Header Widget。