引导表在 Internet Explorer 上不起作用答案

【问题标题】：Bootstrap Table not working on Internet Explorer引导表在 Internet Explorer 上不起作用
【发布时间】：2014-10-29 19:29:12
【问题描述】：

我为着陆页开发的表格在其他浏览器上运行良好，但不适用于 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;
}

【问题讨论】：

标签： html css internet-explorer html-table twitter-bootstrap-2

【解决方案1】：

刚刚检查了您在示例中提供的 HTML，并认为存在问题 - 它无效。有一些像

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

如果您不知道 - 您只有一个元素的类属性，并且可以像这样将类添加在一起

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

你应该只是修复你的 HTML，也许这已经解决了问题。
许多 CSS 规则仅适用于同时具有不同类的元素（在 CSS 中写为 .classone.classtwo 为 <div class="classone classtwo"/>）。当每个类作为单独的类属性值添加时，它们不会相加。尽管无效，但不同的浏览器倾向于以不同的方式处理无效标记，例如试图纠正它以显示可能的预期。所以看起来 Firefox 修复了它，而 IE 行为正常。

【讨论】：

相同的代码似乎在其他浏览器上也可以工作，我删除了处理屏幕分辨率的 css，所有 3 个表格都显示出来了。
但是您没有尝试修复 html？如前所述，某些浏览器倾向于更正无效标记，例如您当前拥有的双重类属性。我只是试一试。否则，如果 IE 问题仍然存在，则无法找到解决方案。刚刚计算了无效的双类元素——它们只有 3 个，所以应该不是问题。