javascript - Firefox 在表格单元格中的绝对位置

Question

令人惊讶的是，给我带来麻烦的不是 IE，而是 Firefox。

fiddle : http://jsfiddle.net/EwUnt/

此表的要点是突出显示光标所在单元格的行和列。

问题是每次我在 Firefox 下测试它时它只突出显示行本身而不是列和行。(在 IE、Chrome、Safari 和 Opera 中运行良好)

在 JS fiddle 上运行良好，但在空白 html 或 Wordpress 上运行不佳。

我正在用它加载这些库。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.9.2/jquery-ui.js"></script>

和脚本:

    $(document).ready(function () {
function firefoxFix() {

    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {

        var tds = document.getElementsByTagName( 'td' );

        for( var index = 0; index < tds.length; index++ ) {
            tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
        };

        var style = '<style>'
            + 'td { padding: 0 !important; }' 
            + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
            + '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );

    };

};

firefoxFix();
)};

这是怎么回事？

Answer 1

Firefox 在涉及表格或 display: table-cell 时存在相对/绝对定位问题。这已报告给 Firefox 开发人员，但到目前为止尚未实现任何修复。 Bug report 1 - Bug Report 2

因此，td:hover::after 上的 width: 100% 是相对于主体而不是单元格显示的。

您可以通过将 td 设置为 display: inline-block 并指定宽度来解决此问题。

修复可以在这里看到:http://jsfiddle.net/EwUnt/27/