Ошибка загрузки браузера Internet Explorer

Question

У меня возникли проблемы с просмотром целевой страницы, которую я разработал с помощью Bootstrap, в Internet Explorer всех версий. В нижней части страницы есть 6 ящиков, которые обычно должны размещаться три в контейнере содержимого. Однако, когда в Internet Explorer отображается дополнительное окно отображения. Сайт URL является: www.newcastleswimmingpools.com - Мой HTML ниже:

<div class="row span12"> 


    <div class="span4"> 
    <div class="contentbox"> 



     <img src="/img/Colours.png" alt="Outstanding Colour Range" /> 
     <center><a style="text-decoration:none; color:black;" href="http://www.barrierreefpools.com/colour-range"><h4>Wide Color Range</h4></a> 
     <p>Boasting six shimmer colours combined with three royal colours you can be assured we have a colour for you. Barrier Reef Pools pride themselves in only using a marine grade gelcoat (ISO NPG.), ensuring the surface in the contact with pool water is the best. </p><br/><br/> 

     </div> 
    </div> 
    <div class="span4"> 
    <div class="contentbox"> 



      <img src="/img/25yr.png" alt="Manufacturer Warranty" /> 
      <center><h4>Manufacturer Warranty</h4> 
      <p> Barrier Reef Pools offer a 25 year structural warranty with their pool shells. There is also an internal warranty which meets SPASA Guidelines and Australian Standards, as opposed to concrete pools which at best, will guarantee a seven year structural warranty.</p><br></center> 
      <br/> 

     </div> 
    </div> 
    <div class="span4"> 
    <div class="contentbox"> 


      <img src="/img/5tick.png" alt="5 Tick of Approval" /> 
      <center><h4>5 Tick Certified Product Award</h4> 
      <p>Barrier Reef Pools Newcastle is the only Fibreglass Swimming Pool provider to be awarded the '5 tick' Certified Award. This proves that you are purchasing quality when you choose Barrier Reef Pools for your next fibreglass swimming pool.</p> 
      </center> 
      <br/><br/><br/> 
    </div> 

    </div> 


    <div class="span4"> 
    <div class="contentbox"> 
      <img src="/img/splash.png" alt="Quick as a Splash Installation" /> 
      <center><h4>Quick As A Splash</h4> 
      <p>From our manufacturing plant straight to your home, your Barrier Reef Pool arrives ready to install. No fuss installation in as little as seven days, compared with concrete rendered or pebbled pools which can take up to three months to complete.</p></center> 
      <br> 
    </div> 
    </div> 

    <div class="span4"> 
    <div class="contentbox"> 



      <img src="/img/Ranges.png" alt="Our Pool Range" /> 
      <center><h4>Pool Range</h4> 
      <p>Development and expansion of our modern shapes and sizes is constant so that our range of pools is second to none. With an 800m2 facility dedicated to new pool development ensures that you will have a choice of the very latest designs and features to suit your lifestyle. </p></center> 
      </center> 
     </div> 

    </div> 

    <div class="span4"> 
    <div class="contentbox"> 


      <img src="/img/LookingGood.png" alt="Looking Good" /> 
      <center><h4>Looking Good</h4> 
      <p>Pools feature a super soft high gloss surface in a fantastic range of vibrant shimmer and royal colours. This ultra-hard wearing surface is non-porous, stain and chemical resistant and of course is so easy to maintain and clean.</p></center> 
      </center> 
      <br/> 
     </div> 
    </div> 



    </div><!--EndRow--> 

CSS:

.contentbox { 
height:300px; 
    margin-bottom:30px;  
    min-height: 20px; 
    padding: 15px; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
} 

Это что-то, наверное, супер просто мне не хватает, чтобы обеспечить Internet Explorer, чтобы сделать правильно. Любая помощь будет принята с благодарностью!

Answer 1

Я не думаю, что вам нужно поставить классы «row» и «span12» на том же <div>. Удалите «span12» и посмотрите, что произойдет. См. docs.

... Я также заметил, у вас есть какие-то неровные теги (</р > в строке 87, </дел > в 910 </центр > в 955 и 967).

Убедитесь, чтобы проверить с W3C Markup Validation Service, прежде чем делать что-нибудь еще;)

Answer 2

Не уверен, если это поможет, но я заметил, что вы не указали DOCTYPE. Bootstrap работает в таких вопросах, как линии высоты, когда вы этого не сделаете, так по крайней мере, не забудьте добавить:

<DOCTYPE html> 

в верхней части документа.

Answer 3

если вам нужен сайт отзывчивым, используйте класс строчно-жидкость, в противном случае просто грести сетка бутстрапу 12. , если вы хотите, 3 коробки в линии, ваше имя диапазона класс должен быть span4, потому что 4 * 3 = 12 Если вы хотите, чтобы 4 поля в строке, ваше имя класса должно быть span3, потому что 3 * 4 = 12 вы его получили? :)

помните, что загрузочный 3,2 больше не поддерживают

<div class="row-fluid"> 
    /* 4*3 = 12 */ 
    <div class="span4">the content</div> 
    <div class="span4">the content</div> 
    <div class="span4">the content</div> 
</div> 
<div class="row-fluid"> 
    /* 4*3 = 12 */ 
    <div class="span4">the content</div> 
    <div class="span4">the content</div> 
    <div class="span4">the content</div> 
</div> 

надежду, что это поможет