Html 引导表在Internet Explorer上不工作_Html_Css_Internet Explorer_Html Table_Twitter Bootstrap 2

Html 引导表在Internet Explorer上不工作

html css internet-explorer

Html 引导表在Internet Explorer上不工作,html,css,internet-explorer,html-table,twitter-bootstrap-2,Html,Css,Internet Explorer,Html Table,Twitter Bootstrap 2,我正在为我的登录页开发的表在其他浏览器上运行良好，但不适用于Internet Explorer 我使用Bootstrap 2.3.0作为框架，下面的图像库使用fancybox。该表在Internet Explorer中根本不显示请记住，通常在同一页面上有3个不同的表来处理不同的屏幕分辨率，我使用媒体查询来管理哪些表应该保持可见。请帮我找到一个方法让桌子正常工作 <!DOCTYPE html> <html> <head> <meta

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

只是检查了您在示例中提供的HTML，并认为存在问题-它无效。有几行是这样的

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

如果您不知道，那么一个元素只有一个class属性，可以像下面这样将类添加到一起

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

我想你应该修改你的HTML，也许这已经解决了这个问题。

许多CSS规则只适用于同时具有不同类的元素（在CSS中为

编写为

.classone.classtwo

）。当每个类作为单独的类属性值添加时，它们不会相加。尽管无效，但不同的浏览器倾向于以不同的方式处理无效的标记，例如，尝试更正它以尽可能按预期显示。因此，看起来Firefox在IE正常运行时修复了它。

相同的代码似乎在其他浏览器上也能工作，我删除了处理屏幕分辨率的css，所有3个表都出现了。但是你没有尝试修复html？如前所述，一些浏览器倾向于纠正无效标记，如您当前拥有的双类属性。我只是想试试。否则，就不可能找到解决方案，以防IE的问题仍然存在。只计算了无效的双类元素-只有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>