0

在 Internet Explorer 所有版本中查看我使用 Bootstrap 设计的登录页面时遇到一些问题。页面底部有 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 正确呈现的可能超级简单的东西。任何帮助将不胜感激!

4

3 回答 3

0

不确定这是否会有所帮助,但我注意到您没有指定 DOCTYPE。当你不这样做时,Bootstrap 会遇到像 line-height 这样的问题,所以至少要确保添加:

<DOCTYPE html>

到文档的顶部。

于 2013-09-11T00:25:39.430 回答
0

我认为您不必将“row”和“span12”类放在同一个 <div> 上。删除“span12”,看看会发生什么。请参阅文档

...我还注意到您有一些未对齐的标签( </p> 在第 87 行,</div> 在 910,</center> 在 955 和 967)。

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

于 2013-09-11T00:13:41.557 回答
0

如果您需要站点响应式,请使用类 row-fluid,否则只需将引导程序的网格排为 12。如果您想要一行 3 个框,您的类跨度名称必须是 span4,因为如果您想要 4*3=12一行 4 个框,你的类跨度名称必须是 span3,因为 3*4=12 你明白了吗?:)

请记住,bootstrap 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>

希望这有帮助

于 2013-09-11T01:31:25.593 回答