Bootstrap Table無法在Internet Explorer上工作

我爲我的着陸頁開發的表格在其他瀏覽器上正常工作，但對Internet Explorer無效。Bootstrap Table無法在Internet Explorer上工作

我正在使用Bootstrap 2.3.0作爲下面圖片庫的框架和fancybox。該表在Internet Explorer中完全不顯示。

請記住，通常在同一頁面上有3個不同的表格來處理不同的屏幕分辨率，我正在使用媒體查詢來管理哪些表格應該保持可見。請幫助我們找到一種方法讓表格正常工作。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset ="UTF-8"> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     <!--Custom CSS --> 
     <link rel="stylesheet"href="/Users/Christopher/Desktop/ClubPedia Landing page/CSS/Landingpage.css"/> 
     <!-- Add jQuery library --> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <!-- Add fancyBox --> 
     <link rel="stylesheet" href="/Users/Christopher/Desktop/ClubPedia Landing page/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css"media="screen" /> 
     <!--fancybox javascript--> 
     <script type="text/javascript" src="/Users/Christopher/Desktop/ClubPedia Landing page/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> 
    </head> 
    <body> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-12" id="Title"> 
       <p>Title</p> 
      </div> 
     </div> 
     </div> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-3" class="col-md-3"> </div> 
      <div id="TextBox" class="col-lg-6" class="col-md-6" > 
       <p> text box </p> 
      </div> 
      <div class="col-lg-3" class="col-md-3"> </div> 
     </div> 
     <div class="container-fluid"> 
      <div class="row"> 
       <style media="screen and (min-width:0px)"> 
        #Large_table {display:none;} 
        #Medium_table {display:none;} 
       </style> 
       <style media="screen and (min-width:992px)"> 
        #Small_table {display:none;} 
        #Large_table {display:none;} 
        #Medium_table {display:initial;}  
       </style> 
       <style media="screen and (min-width:1200px)"> 
        #Small_table {display:none;} 
        #Medium_table {display:none;} 
        #Large_table {display:initial;} 
        td { width:311px; 
        height:228px; 
        } 
       </style> 
       <div class="table-responsive"> 
        <!--Small table --> 
        <table class="table" id="Small_table"> 
        <thead> </thead> 
        <tbody> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" /> 
           </a> 
         </tr> 
         <tr> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" alt="" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg"/> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
        </tbody> 
        </table> 
        <!-- Medium table ---> 
        <table class="table" id="Medium_table"> 
        <thead> </thead> 
        <tbody> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" alt="" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg"/> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
        </tbody> 
        </table> 
        <!--Large table--> 
        <table class="table" id="Large_table" > 
        <thead> </thead> 
        <tbody> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" alt="" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg"/> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" /> 
           </a> 
          </td> 
          <td> 
           <a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" class="fancybox" rel="gallery"> 
           <img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" /> 
           </a> 
          </td> 
         </tr> 
        </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
     </div> 
     </div> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".fancybox").fancybox(); 
     }); 
     </script> 
    </body> 
</html>

這裏是自定義CSS：

#TextBox { 
    margin-left:auto; 
    margin-right:auto; 
    border-radius: 5px; 
    background-color:grey; 
    height:500px; 
    width:50%; 
} 

#Title { 
    height:300px; 
    background-color:white; 
    opacity:0.9; 
} 

body { 
    background-color:black; 
} 

img { 
    width:100%; 
    height:auto; 
} 

table { 
    margin-left:auto; 
    margin-right:auto; 
}

來源

2014-09-04 Tito

剛纔檢查你在你的例子提供，覺得有問題的HTML - 這是無效的。有喜歡

<div class="col-lg-3" class="col-md-3">

一些線路如果你不知道 - 你有一個元素只有一個分類屬性，可以像

<div class="col-lg-3 col-md-3">

猜你應該只是修復了一起添加類的HTML，也許這將已經解決了這個問題。
許多CSS規則僅適用於同時具有不同類的元素（在<div class="classone classtwo"/>的CSS中編寫爲.classone.classtwo）。當每個類被添加爲單獨的類屬性值時，它們不會相加。儘管無效，但不同的瀏覽器傾向於以不同的方式處理無效的標記，例如，試圖糾正它以顯示可能的意圖。所以它看起來像Firefox修復它，而IE的行爲正常。

來源

2014-09-04 22:20:24

相同的代碼似乎在其他瀏覽器上工作，我刪除了處理屏幕分辨率的CSS，並出現了所有3個表。 – Tito 2014-09-04 23:12:39

但你沒有嘗試修復html？如前所述，某些瀏覽器傾向於修正無效標記，如您當前擁有的雙重類屬性。我只是試試看。否則，無法找到解決方案，以防IE問題仍然存在。只計算了無效的雙層元素 - 只有3個元素，所以不應該成爲問題。 – 2014-09-04 23:16:40

Bootstrap Table無法在Internet Explorer上工作

回答

相關問題