Firefox在table-cell中的位置绝对

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都存在相对/绝对定位的问题.这已经报告给Firefox开发者,但到目前为止还没有实现修复.错误报告1 - 错误报告2

因此,相对于身体而不是细胞,可以看到width: 100%你td:hover::after的身体.

您可以通过设置您解决这个问题td,以display: inline-block与指定的宽度.

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