Question

我有一个使用bootstrap的小程序，我使用的是bootstrap面板。它的工作方式与Chrome浏览器一样，但不适用于IE浏览器。

这是我正在使用的代码：在图片上可以看到出现的差异。

<html>
<head>
   <meta charset="UTF-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>



    <style type="text/css">

        body {
            background-color:#fcfcfc;
        }
        *, *:before, *:after {box-sizing:  border-box !important;}
        .row {
         -moz-column-width: 30em;
         -webkit-column-width: 30em;
         -moz-column-gap: .5em;
         -webkit-column-gap: .5em; 

        }
        .panel {
         display: inline-block;
         margin:  .5em;
         padding:  0; 
         width:98%;
        }
</style>
  </head>

<body>
<div id="content" class="container">

        <h3>Apps</h3>

<div class="row">
    <div class="panel panel-success">
        <div class="panel-heading"><h3 class="panel-title">App1</h3></div>
        <div class="panel-body">
            <div class="list-group">

                <a href="NewApplication.aspx?id=0700" class="list-group-item">App1.1</a>
                <a href="NewApplication.aspx?id=0703" class="list-group-item">App1.2</a>
                <a href="NewApplication.aspx?id=0705" class="list-group-item">App1.3</a>
            </div>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading"><h3 class="panel-title">App2</h3></div>
        <div class="panel-body">
            <div class="list-group">
                <a href="#" class="list-group-item">App2.1</a>
                <a href="#" class="list-group-item">App2.2</a>
                <a href="#" class="list-group-item">App2.3</a>
                <a href="#" class="list-group-item">App2.4</a>
                <a href="#" class="list-group-item">App2.5</a>
                <a href="#" class="list-group-item">App2.6</a>
                <a href="#" class="list-group-item">App2.7</a>
        </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading"><h3 class="panel-title">App3</h3></div>
        <div class="panel-body">
            <div class="list-group">
                <a href="#" class="list-group-item">App3.1</a>
                <a href="#" class="list-group-item">App3.1</a>
                <a href="#" class="list-group-item">App3.1</a>
                <a href="#" class="list-group-item">App3.1</a>
                <a href="#" class="list-group-item">App3.1</a>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

IE

铬

Answer 1

我找到了解决方案。 Internet Explorer不接受前缀，因此我需要稍微更改css

.row {
     -moz-column-width: 28em;
     -webkit-column-width: 28em;
      column-width: 28em;
     -moz-column-gap: .5em;
     -webkit-column-gap: .5em; 
      column-gap: .5em;

Bootstrap面板在Chrome和Internet Explorer中的显示方式不同

1 个答案: