在Chrome和Internet Explorer中引導面板的顯示方式不同

我有一個使用引導程序的小程序，我正在使用引導面板。它像我希望在Chrome中運行，但不在IE中。在Chrome和Internet Explorer中引導面板的顯示方式不同

這是我正在使用的代碼：在圖片上看到出現的差異是波動的。

<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>

鉻

來源

2016-12-02 user1732558

提供代碼片段 – Sojtin

可能的解決方案http://stackoverflow.com/questions/21311466/bootstraps-grid-system-on-internet- explorer – Sojtin

我試圖從其他解決方案中添加此行，但它沒有區別 – user1732558

我發現了一個解決方案。的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;

來源

2016-12-08 16:59:58 user1732558

在Chrome和Internet Explorer中引導面板的顯示方式不同

回答

相關問題