html - 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 文件时的跨域问题。下面的链接详细说明了在 IE8 的开发与生产环境中使用 Respond.js 时的进一步注意事项。 请注意，由于 IE8 lack of full support，v3.0.1 中关于 box-sizing: border-box; 的使用也有一些变化。

要解决此问题，您需要通过 http 查看此内容，响应功能将在 IE8(文档模式 8)中如您所愿出现。

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