與Firefox的css問題

Question

我在FireFox上正確加載CSS時遇到了問題。頁面內容從Db正確加載。當它出現在舞臺上時，該頁面在Firefox中搞砸了，並在Chrome，IE中運行良好。我遇到了與我通過添加修復的鉻相同的問題。

​​

但是，這永遠不會幫助FF。我懷疑這發生在Firefox嘗試加載JavaScript時，然後CSS變得混亂。這裏是我的CSS和我的演示頁

http://sudanesetweeps.com/dev/index.php

/* 

*/ 


body { 
    background: #282425 url(../images/background.jpg) no-repeat top center; 
    font-size:12px; 
} 

#myTable { width: 100%;overflow:hidden; } 
.wrapper { 
    position:relative; 
    margin: 0 auto; 
    width: 852px; 
    padding: 25px 0; 
} 

/* header */ 
.header .logo { 
    margin-bottom: 21px; 
} 
.header ul.nav { 
    position:relative; 
    list-style: none; 
    margin:0;padding:0; 
    color: #fcd770; 
    background: url(../images/menu.png) no-repeat top left; 
    overflow:hidden; 
    height: 46px; 
    font-size:15px; 
} 
    .header ul.nav li { 
     float:left; 
     position:relative; 
     margin: 15px 0 0 20px; 
    } 
    .header ul.nav li a{ 
     color: #fcd770; 
     text-decoration:none; 
     font-weight:bold; 
    } 
.header .header_twitter { 
    position:relative; 
    height: 260px; 
    background: url(../images/header_bg.png) no-repeat top left; 
    color: #fff; 
} 
    .header .header_twitter .singin_twitter { 
     position:absolute; 
     bottom: 40px; 
     right: 55px; 
    } 

/* middle */ 
.middle { 
    position:relative; 
    margin: 30px 0; 
} 
.middle a{ 
    color: #000; 
} 
    .middle .row_top { 
     background: url(../images/table_top.png) no-repeat top left; 
     overflow:hidden; 
     color: #fcd770; 
    } 
    .middle .row { 
     overflow:hidden; 
     background: url(../images/table_middle.png) no-repeat top left; 
     color: #000; 
    } 
    .middle .row_top .col1, 
    .middle .row_top .col2, 
    .middle .row_top .col3, 
    .middle .row_top .col4, 
    .middle .row_top .col5, 
    .middle .row_top .col6, 
    .middle .row_top .col7, 
    .middle .row_top .col8{ 
     float:left; 
     padding: 20px 0 18px; 
     text-align:center; 
    } 
    .middle .row .col1, 
    .middle .row .col5, 
    .middle .row .col3, 
    .middle .row .col4, 
    .middle .row .col6, 
    .middle .row .col7, 
    .middle .row .col8{ 
     float:left; 
     padding: 20px 0 0 0; 
     text-align:center; 
    } 
    .middle .row .col2{ 
     padding: 7px 0 8px 0; 
     float:left; 
     text-align:center; 
    } 
    .middle .row .col1, 
    .middle .row_top .col1{ 
     width: 98px; 
    } 
    .middle .row .col2, 
    .middle .row_top .col2{ 
     width: 102px; 
    } 
    .middle .row .col3, 
    .middle .row_top .col3{ 
     width: 146px; 
    } 
    .middle .row .col4, 
    .middle .row_top .col4{ 
     width: 150px; 
    } 
    .middle .row .col5, 
    .middle .row_top .col5{ 
     width:76px; 
    } 
    .middle .row .col6, 
    .middle .row_top .col6{ 
     width:73px; 
    } 
    .middle .row .col7, 
    .middle .row_top .col7{ 
     width:118px; 
    } 
    .middle .row .col8, 
    .middle .row_top .col8{ 
     width:87px; 
    } 
    .middle .last { 
     background: url(../images/table_bottom.png) no-repeat top left; 
    } 




/* footer */ 
.footer { 

} 
    .footer_top { 
     height: 17px; 
     background: url(../images/footer_top.png) no-repeat top left; 
    } 
    .footer_bottom { 
     height: 17px; 
     background: url(../images/footer_bottom.png) no-repeat top left; 
    } 
    .footer_content { 
     background: #2b7fc3; 
     color: #fff; 
     width:851px; 
     font-size:12px; 
     text-align:center; 
    } 
     .footer_content a { 
      color: #fcd770; 
      font-size: 12px; 
      text-decoration:none; 

     } 

Answer 1

問題是由在HTML中<colgroup>和CSS的表格元素的組合引起的。最簡單的方法是刪除<colgroup>，因爲在這種情況下不需要。您的網站仍然會按照您的需要。

編輯：在進一步的調查中，您的JavaScript正在生成<colgroup>。如果您禁用JavaScript並在Firefox中刷新頁面，則會看到它沒有問題。我相信它正在由jquery.tablesorter.min.js生成。

我建議使用不同的表格分頁插件。我沒有太多的表格分頁經驗，但我會谷歌和嘗試一些可用的插件。這one看起來很有趣。