Internet Explorer 浏览器问题引导程序

Question

我在Internet Explorer所有版本中查看使用Bootstrap设计的登录页面时遇到了一些问题。 页面底部有 6 个框，通常应位于内容容器中的三个框。 但是，在 Internet Explorer 中，会显示一个额外的显示框。网站网址是： 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"类放在同一个

上。删除"span12"，看看会发生什么。请参阅文档。

。我还注意到您有一些未对齐的标签（

在第 87 行、

在 910、在 955 和 967）。

在执行任何其他操作之前，请确保使用 W3C 标记验证服务进行验证;)

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>

希望这个帮助