【问题标题】:Internet Explorer Browser Issue BootstrapInternet Explorer 浏览器问题引导程序
【发布时间】:2013-09-11 09:31:25
【问题描述】:

在 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 正确呈现可能是我所缺少的超级简单的东西。任何帮助将不胜感激!

【问题讨论】:

    标签: html css internet-explorer twitter-bootstrap


    【解决方案1】:

    我认为您不必将“row”和“span12”类放在同一个

    上。删除“span12”,看看会发生什么。请参阅docs

    ...我还注意到您有一些未对齐的标签(

    在第 87 行,
    在 910, 在 955 和 967)。

    确保在做任何其他事情之前使用W3C Markup Validation Service 进行验证;)

    【讨论】:

    • 感谢您的回复。我试过以上建议,但没有运气。查看时幻象随机框还在。
    • @jose 关于这一行是正确的。每行需要等于 12。HTML 错误也可能导致幻像行为。 IE 不像其他浏览器那样宽容。 Invaluable tool
    • 您好,感谢您的及时回复——我已经按照说明修复了以下问题,但是仍然在 IE 中的幻象框正在显示。你可以在这里查看:www.newcastleswimmingpools.com/index2.html
    【解决方案2】:

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

    <DOCTYPE html>
    

    到文档的顶部。

    【讨论】:

      【解决方案3】:

      如果您需要响应式网站,请使用 row-fluid 类,否则只需 row 引导程序的网格是 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>
      

      希望有帮助

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-11-29
        • 2013-07-11
        • 2012-07-24
        • 2014-04-12
        • 2010-11-05
        • 2015-08-17
        • 2020-10-02
        • 1970-01-01
        相关资源
        最近更新 更多