IE8 Bootstrap Respond.JS,列表项不是水平的

时间:2014-12-03 16:32:35

标签: jquery css3 twitter-bootstrap twitter-bootstrap-3 respond.js

我在bootstrap中遇到dl-Horizo​​ntal类问题。

我的行上有两列,每列中都有一个dl列表。在除IE 8之外的所有浏览器中,列表项()和列表值()彼此相邻,然后下一个项值对位于下一行。但是在IE8中,项目然后值显示在彼此之下,并且两列彼此在一起。

感谢您的时间。

Fiddle Example

 <link href="<%=ResolveUrl("~/Extern/JQuery/BootStrap/bootstrap-3.2.0/dist/css/bootstrap.min.css")%>" rel="stylesheet" />
    <script src="<%=ResolveUrl("~/Extern/JQuery/Jquerylibs/Jquery1-11/jquery1-11-0.js")%>" type="text/javascript"></script>
    <script src="<%=ResolveUrl("~/Extern/JQuery/BootStrap/bootstrap-3.2.0/dist/js/bootstrap.min.js")%>" type="text/javascript"></script>

     <!--[if lt IE 9]>
         <script src="<%=ResolveUrl("~/Extern/JQuery/html5Siv/html5shiv-master/dist/html5shiv.min.js")%>" type="text/javascript"></script>
        <script src="<%=ResolveUrl("~/Extern/JQuery/Respond-master/dest/respond.min.js")%>" type="text/javascript"></script>
  <![endif]-->  


    <div class="container">
        <div class="row">
              <div id="OnlineEstimate" class="OnlineTabCell">
                 <div class="col-6 col-sm-6 col-lg-5">
                      <dl class="dl-horizontal"> 
                          <dt>Make:</dt><dd><div id="DetMake">aaa</div></dd> 
                          <dt>Model:</dt><dd><div id="DetModel">bbb</div></dd> 
                          <dt>Derivative:</dt><dd><div id="DetDerivative">ccc</div></dd> 
                          <dt>VIN:</dt><dd><div id="DetVin">ddd</div></dd> 
                           <dt>REG:</dt><dd><div id="DetReg">eee</div></dd> 
                          <dt>Colour:</dt><dd><div id="DetMileage">fff</div></dd>
                          <dt>Mileage:</dt><dd><div id="DetColour">ggg</div></dd>
                          <dt>Account:</dt><dd><div id="DetAccount">hhh</div></dd>
                          <dt>Customer No:</dt><dd><div id="DetCustNo">iii</div></dd>
                      </dl> 
                    </div>
                   <div class="col-6 col-sm-6 col-lg-6">
                      <dl class="dl-horizontal"> 
                          <dt>Address:</dt><dd><div id="DetAdd1">aaa</div></dd> 
                          <dt></dt><dd><div id="DetAdd2">bbb</div></dd> 
                          <dt></dt><dd><div id="DetAdd3">ccc</div></dd> 
                          <dt></dt><dd><div id="DetAdd4">ddd</div></dd> 
                           <dt></dt><dd><div id="DetTown">eee</div></dd> 
                          <dt></dt><dd><div id="DetCounty">fff</div></dd>
                          <dt>Postcode:</dt><dd><div id="DetPostcode"></div></dd>

                      </dl> 
                    </div>

            </div>
        </div>
         </div>

以下链接是我用来测试IE 8模式的小提琴整页模式!

Fiddle Full page mode

问候

汤姆

1 个答案:

答案 0 :(得分:0)

问题是由于javascript库放在正文中而不是页面的头部。