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>

我附加了图片，因此您可以轻松识别问题。 enter image description here

Answer 1

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

更新：从cdn请求您的bootstrap css和js文件时可能还有其他原因，例如跨域问题。下面的链接详细说明了在IE8的开发与生产环境中使用Respond.js时的注意事项。请注意，由于IE8 lack of full support

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

要解决此问题，您需要通过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 ">

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

2 个答案: