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/