Bootstrap 面板显示在 IE-8 中左对齐

Question

我使用 Bootstrap 面板 创建登录表单。

但是当我在 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 请求您的bootstrap css 和js 文件时的跨域问题。下面的 link 详细说明了在 IE8 的开发与生产环境中使用 Respond.js 时的进一步注意事项。请注意，由于 IE8 lack of full support

，v3.0.1 中关于 box-sizing: border-box; 的使用也有一些变化

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

bootstrap docs explain这是由于与respond.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 ">

Bootstrap 面板显示在 IE-8 中左对齐

Bootstrap panel showing left aligned in IE-8

html

css

twitter-bootstrap

layout

twitter-bootstrap-3