2013-09-11 544 views
0

我在查看使用Bootstrap設計的登錄頁面時出現了一些問題,在Internet Explorer內所有版本。在頁面底部有6個框,通常應該在內容容器中放置三個框。但是,在Internet Explorer中顯示一個額外的顯示框。該網站網址爲:www.newcastleswimmingpools.com - 我的HTML低於:Internet Explorer瀏覽器問題引導

<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來正確呈現。任何幫助將不勝感激!

回答

0

我不認爲你必須把「行」和「span12」類放在同一個<div>。刪除「span12」,看看會發生什麼。請參閱docs

...我也注意到你有一些未對齊的標籤(</P >在第87行,</DIV >在910,955和967 < /中心>)。

確保其他人做任何事情之前,W3C Markup Validation Service驗證;)

+0

感謝您的答覆。我嘗試了以上的建議,但沒有運氣。觀看時幻像隨機框仍然存在。 – user1658953

+0

@ jose對這一行是正確的。每一行都需要等於12.同樣,HTML錯誤可能會導致幻影行爲。 IE不像其他瀏覽器那樣寬容。 [寶貴的工具](https://addons.mozilla.org/en-US/firefox/addon/web-developer/) – Ken

+0

嗨,感謝您的及時回覆 - 我已經修正了下面的說明,但幻像盒仍然在IE是dislpaying。你可以在這裏查看它:www.newcastleswimmingpools.com/index2.html – user1658953

0

不知道這是否會幫助,但我注意到你沒有指定DOCTYPE。 Bootstrap運行時會遇到線高問題,因此至少請務必添加:

<DOCTYPE html> 

到您的文檔的頂部。

0

如果你需要一個網站響應,使用類排液,否則只是排 引導的網格是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> 

希望這有助於

相關問題