jQuery DataTables搞亂我的IE8的CSS網格，如何解決？

我正在使用ASP.NET MVC3和jQuery Datatable插件。當數據表位於頁面上時，我遇到了CSS佈局問題。如果沒有數據表，那麼一切都顯示正常。當數據表在屏幕上時，它與我網站的頁腳重疊。我似乎無法得到這個顯示正確。我必須使用YUI3網格佈局，這是我從YUI3都使用（按照這個順序）：jQuery DataTables搞亂我的IE8的CSS網格，如何解決？

cssreset分鐘
cssfonts分鐘
cssgrids分鐘
cssbase-分

這在最新版本的FireFox中正常工作。我只在IE8上測試，這是一項要求，我工作中的大多數人使用IE8。

我已經縮小了我的HTML，因此只有最低限度可用。這是我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
      <title>My Website</title> 
      <meta charset="utf-8" /> 
      <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
      <link href="/Assets/Stylesheets/hef2.css" rel="stylesheet" /> 
      <link href="/Assets/Stylesheets/jQuery-DataTables/css/jquery.dataTables.css" rel="stylesheet" /> 
    </head> 
    <body> 

      <div id="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> 

      <div id="bd"> 

       <div class="yui3-g"> 

        <div class="yui3-u" id="nav"> 

         <div id="nav-container"> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

         </div> 
        </div> 

        <div class="yui3-u" id="main"> 

         <div id="main-container"> 

           <div class="content"> 
            <h1>Banks Dashboard</h1> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

           <div class="content"> 

            <div id="banks-datatable-wrapper"> 
             <div id="banks-datatable-container"></div> 
             <div style="clear:both;"></div> 
            </div> 

           </div> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

           <div class="content"> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> 
           </div> 

         </div> 

        </div> 

       </div> 

      </div> 

      <div id="ft">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> 

      <script src="/Assets/JavaScripts/jQuery/jquery-1.7.2.min.js"></script> 
      <script src="/Assets/JavaScripts/jQuery-DataTables/jquery.dataTables.min.js"></script> 

      <script type="text/javascript"> 

       $(document).ready(function() { 

        $('#banks-datatable-container').html('<table class="display" id="banks-datatable"></table>'); 
        $('#banks-datatable').dataTable({ 
         "aoColumns": [ 
           { "sTitle": "Engine" }, 
           { "sTitle": "Browser" }, 
           { "sTitle": "Platform" }, 
           { "sTitle": "Version", "sClass": "center" }, 
           { "sTitle": "Grade" } 
         ], 
         "bAutoWidth": false, 
         "bFilter": false, 
         "bLengthChange": false, 
         "bProcessing": true, 
         //"bServerSide": true, 
         "bSort": false, 
         "iDisplayLength": 11, 
         "sAjaxSource": '/Administration/Bank/List2' 
        }); 
       }); 

      </script> 

    </body> 

</html>

這是我目前正與YUI3的CSS一起使用的唯一的CSS：

body 
{ 
    margin: auto; 
    width: 1025px; 
} 

#nav 
{ 
    width: 300px; 
} 

#main 
{ 
    width: 725px; 
}

是否有人可以幫助我得到這個整理出來？我試圖嘗試加入clear:both，但它沒有奏效。

是否可以粘貼/上傳我的HTML/CSS代碼/文件的在線服務，如jsbin？

代碼見：http://live.datatables.net/efosuj/3/edit。它在可用查看器中正確顯示，但在IE8中單獨運行時會出現問題。

UPDATE 2012-06-12

我設法添加以下和它的作品，但我想將其添加到一種風格，嘗試過，但沒有奏效：

if (navigator.userAgent.toString().indexOf('MSIE') >= 0) { 
    jQuery('#main-container').css('overflow', 'auto'); 
}

這是在網格加載後添加的。這是做到這一點的唯一方法嗎？

來源

2012-06-07 Brendan Vogt

我用下面的，它爲我的作品：

if (navigator.userAgent.toString().indexOf('MSIE') >= 0) { 
    jQuery('#main-container').css('overflow', 'auto'); 
}

它被張貼在datatables forums。

來源

2012-06-13 10:36:42

在你的桌子上你有class =「display」這個類是什麼？我認爲這個職業需要職位：絕對的;

來源

2012-06-07 13:36:32 joncodo

顯示目前是空的類。我嘗試了你的建議，但更糟的是弄亂了事情。 –

去檢查http://live.datatables.net/efosuj/3/edit，複製並粘貼到單獨的文件並在IE8中打開。 –

jQuery DataTables搞亂我的IE8的CSS網格，如何解決？

回答

相關問題