2013-11-14 129 views
2

令人惊讶的是,它不是IE导致我麻烦,但Firefox。绝对的表格单元格中的Firefox位置

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

此表中的点是突出在其上的光标是单元的行和列。

的事情是每次IM火狐下测试它,它凸显仅排,而不是两者本身,列和行。(在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(); 
)}; 

这有什么错呢?

回答

6

无论何时涉及表格或display: table-cell,Firefox都存在相对/绝对定位问题。这已经被报告给Firefox的开发者,但迄今为止还没有修复。 Bug report 1 - Bug Report 2

因此,您的td:hover::after上的width: 100%可以看到相对于身体而不是单元格。

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

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

相关问题