Question

以下是在IE9及以上版本中正常工作但在IE8中无法正常工作的代码

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" id="div1"> 
                        <div class="panel panel-default" style="" id="panel1">
                            <div class="panel-body" style="" id="panelbody1">
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <img src="img/Data Input.png" class="img-responsive" style="float:right;"/>
                                 </div>
                                 <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" style="">
                                     <button type="button" class="btn btn-default btn-xl1">Data Input Interface</button>
                                  </div>  
                            </div>      
                            <div class="panel-body" style="" id="panelbody2">
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <img src="img/Dashboard.png" class="img-responsive" style="float:right;"/>
                                 </div>
                                 <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                                     <button type="button" class="btn btn-default btn-xl2">Dashboard</button>
                                  </div>  
                            </div>      
                      </div>   


<!--CSS File -->

<style>
@media(min-width:1500px){


.btn-xl1 {
       padding:40px;
        font-size: 25px;
        border-radius: 8px;
        margin-left:20px;
         color:green;
        background-color:lightgrey;
        width:100%;

      }

      .btn-xl2 {

          padding: 40px;
        font-size: 25px;
        border-radius: 8px;
        margin-left:20px;
       color:green;
        background-color:lightgrey;
        width:100%;
      }

    .btn-xl1 img{width:60px;}
    .btn-xl2 img{width:60px;}      
#panel1{width:70%;}
#panelbody1{border:1px lightgrey solid; border-radius:10px;}
#panelbody2{border:1px solid lightgrey;  border-radius:10px; margin-top:10px;}
#panelbody1 img{padding-top:10px;}
#panelbody2 img{padding-top:30px;}

}
</style>

<link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


      <script type="text/javascript" src="js/respond.min.js"></script>
      <script type="text/javascript" src="js/html5shiv.min.js"></script>

虽然我已经包含了所有必要的文件，但是我遇到的IE8问题是按钮，css，背景颜色等的对齐方式无法看到。问题是什么????

Answer 1

确保在所有正文内容后调用<script type="text/javascript" src="js/respond.min.js"></script>。
对于IE8及更低版本，您必须从服务器运行HTML脚本，以避免由respond.js / respond.min.js引起的安全性错误。如果您还没有组织服务器，可以通过localhost调试，这将解决您的问题。

可以查看更多信息here

IE8中的问题，使用bootstrap显示网页？

1 个答案: