Загрузочный стол, не работающий в Internet Explorer

Моя таблица, которую я разрабатываю для своей целевой страницы, отлично работает в других браузерах, но не работает в Internet Explorer.Загрузочный стол, не работающий в 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 применяются только к элементам, которые имеют разные классы в одно и то же время (написано как .classone.classtwo в CSS для <div class="classone classtwo"/>). Когда каждый класс добавляется как отдельное значение атрибута класса, они не будут складываться. Несмотря на то, что они недействительны, разные браузеры, как правило, обрабатывают недействительную разметку различными способами, например. пытаясь исправить его, чтобы отобразить как возможно предназначенный. Таким образом, похоже, что Firefox исправляет его, пока IE ведет себя правильно.

источник

2014-09-04 22:20:24

Тот же код, похоже, работает с другими браузерами, и я удалил css, который касался разрешения экрана, и появились все 3 таблицы. – Tito

Но вы не пытались исправить html? Как уже упоминалось, некоторые браузеры, как правило, исправляют недействительную разметку, такую как двойные атрибуты класса, которые у вас есть. Я бы просто попробовал. В противном случае невозможно найти решение в случае, если проблема с IE будет сохраняться. Просто подсчитал недопустимые элементы двойного класса - их всего три, поэтому не должно быть проблемой. –

Загрузочный стол, не работающий в Internet Explorer

ответ

Смежные вопросы