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

Posted 2023-03-06

【中文标题】在 IE-8 中显示左对齐的引导面板

【英文标题】：Bootstrap panel showing left aligned in IE-8

【发布时间】：2015-03-02 20:39:36

【问题描述】：

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

但是当我在 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>

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

【问题讨论】：

IE8 issue with Twitter Bootstrap 3 的可能重复项

我的问题是布局在中心不可见，图标也不可见。

不，这是不同的问题，因为我使用了 bootsrap-panel 组件。 @猛禽

【参考方案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 相关的浏览器安全规则。

【讨论】：

我在实时服务器中尝试过，但它还没有工作。相同的外观和感觉。

【参考方案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 ">

【讨论】：

以后遇到类似问题的人请参阅@Raptor 的最初评论和链接的问题。添加“中心”类仅修复了您提供的代码中的错字（第 2 行 - 缺少右引号）。正确排序/使用您的 bootstrap.css、html5shiv.js 和 respond.js 以及这些文件的位置（本地 vs cdn）将允许 IE8 中的媒体查询按照您的预期响应。