2013-11-14 59 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/

相關問題