在 IE-8 中显示左对齐的引导面板

Question

我使用引导面板来创建登录表单。

但是当我在 IE-8 中检查我的 ui 时，它看起来左居中，glyphicon-icons 也没有显示。 在其他浏览器中看起来很完美。

        <div class="message warning">
    <div class="col-md-6 col-md-offset-3 col-xs-6 col-sm-6>
     <div class="panel panel-default" >  
                    <div class="panel-heading" >
                        <span class="glyphicon  glyphicon-eye-open "></span> Login
                    </div>
         <div class="panel-body">
        <form class="form-horizontal" action="">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-4">Organisation Id</label>

                <div  class="col-xs-7 col-sm-7 col-md-7">
                    <div class="input-group">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                        <input type="email" class="form-control" id="inputEmail" require placeholder="Organisation Number" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-4">Username</label>

                <div  class="col-xs-7">
                    <div class="input-group">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                        <input type="email" class="form-control" id="inputEmail" require placeholder="Username" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-4">Password</label>
                  <div  class="col-xs-7">
                    <div class="input-group">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" class="form-control" id="inputPassword" require placeholder="Password" >
                     </div>
               </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-4 col-xs-6">
                    <div class="checkbox input-group">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-4 col-xs-10">
                    <button type="submit" class="btn btn-primary">Login</button>
                      <!--<button type="submit" class="btn btn-primary">Cancel</button>  -->
                </div>
            </div>
        </form>
     </div>
     </div> 
    </div>  
    </div>

我已附上图片，以便您轻松识别问题。

Answer 1

这可能是由本地文件系统提供的页面引起的。

更新：从 cdn 请求引导 css 和 js 文件时，可能还有其他原因，例如跨域问题。下面的链接详细说明了在 IE8 的开发和生产环境中使用 Respond.js 时的更多注意事项。 请注意，由于IE8 lack of full support，v3.0.1 中关于box-sizing: border-box; 的使用也有一些变化

要解决此问题，您需要通过 http 进行查看，响应式功能将在 IE8（文档模式 8）中按预期显示。

bootstrap docs explain 这是由于与 response.js 相关的浏览器安全规则。

Answer 2

我得到了这个问题的解决方案。 我添加了一些额外的 css 代码，它也可以在 IE-8 中运行。

.center {
 float: none;
 margin-left: auto;
 margin-right: auto;
}

  <div class="col-md-6 col-md-offset-3 col-xs-6 col-sm-6 center ">