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

Question

Suprisingly enough it's not IE which causes me trouble, but Firefox.

Fiddle: http://jsfiddle.net/EwUnt/

Point of this table is to highlight row and column of the cell on which cursor is.

The thing is every time im testing it under Firefox it highlights only row itself instead of both, column and row.(works well in IE, Chrome, Safari and Opera)

On JS fiddle it works well, however on blank html or Wordpress it does not.

I'm loading these libraries with it.

<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>

And the 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();
)};

What's wrong with it?

Answer 1

Firefox has a problem with relative/absolute positioning whenever tables or display: table-cell is involved. This has been reported to the Firefox devs but so far no fix has been implemented. Bug report 1 - Bug Report 2

Because of this, the width: 100% on your td:hover::after is seen relative to the body instead of the cell.

You can fix this by setting your td to display: inline-block and specifying a width.

Fix can be seen here: http://jsfiddle.net/EwUnt/27/