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

Question

令人惊讶的是，不是IE引起了我的麻烦，而是Firefox。

小提琴： http ： //jsfiddle.net/EwUnt/

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

事情是每次在Firefox下进行即时测试时，它只突出显示行本身，而不突出显示列和行。（在IE，Chrome，Safari和Opera中运行良好）

在JS小提琴上，它运作良好，但是在空白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

每当涉及表或display: table-cell时，Firefox都会存在相对/绝对定位问题display: table-cell涉及display: table-cell 。 已经向Firefox开发人员报告了此问题，但到目前为止尚未实现修复。 错误报告1- 错误报告2

因此，您在td:hover::after上看到的width: 100%相对于身体而不是细胞。

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

可以在这里查看修复程序： http : //jsfiddle.net/EwUnt/27/