Bootstrap 3 + IE11 + HTML5 不工作

Question

我无法让我的页面在 ie11 中正常显示，在 chrome 中它工作得很好，但是当我切换到 IE11 时它没有。

在 Chrome 中，它是响应式砌体网格，在 IE 中，它使用全宽并将每篇文章堆叠在顶部。

我试过 html5shiv，respond.js modernizr，我试过 wp_enqeueing 它，试过在页脚、页眉中包含脚本，并通过 cdn 链接它们，但也存储在本地。

我需要做什么？

    <!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Freek Bellinga</title>
        <!-- Awesome Font -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <!-- Google fonts -->
        <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Old+Standard+TT:400,700,400italic|Cookie' rel='stylesheet' type='text/css'>
        <!-- Bootstrap CSS -->
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <!-- Style CSS  -->
        <link rel="stylesheet" type="text/css" href="style.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>



<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand website-title" href="#">Mijn Limericks</a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav navbar-default">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Over Mij</a></li>
        <li><a href="#">Categoriëen</a></li> 
        <li><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>






        <div class="container">
            <div class="row">

               <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
      <img src="img/stoel.jpg" class="img-responsive">
      <h1>Stoel</h1>
      <span>16 maart, 2015</span>
      <p class="limerick-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="img/langejaap.jpg" class="img-responsive">
       <h1>Lange Jaap</h1>
      <span>16 maart, 2015</span>
      <p class="limerick-text">een boegbeeld van ver waargenomen
        de Lange Jaap bij de stad mijner dromen
        het gevoel van geluk
        mijn dag kan niet meer stuk
        in de polder is het dubbel thuiskomen</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="img/zeester.jpg" class="img-responsive">
       <h1>Zee ster</h1>
      <span>16 maart, 2015</span>
      <p class="limerick-text">een zeester verrast en verlegen
        heeft onverwacht bezoek gekregen
        zij bad stil en blij
        blijf voor altijd bij mij
        en durft zich haast niet te bewegen</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="img/zeegolf.jpg" class="img-responsive">
        <h1>Golf</h1>
      <span>16 maart, 2015</span>
      <p class="limerick-text"> een foto na uren verkregen
machtige golf ,windkracht negen
mijn dorp aan de zee
sluit haar ogen in bée
tsunami wendt tijdig haar steven</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/430" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/400" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/490" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/480" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
      <img src="//placehold.it/530" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/460" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/430" class="img-responsive">
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 text-center bg">
       <img src="//placehold.it/400" class="img-responsive">
    </div>
</div>
</div>




        <div class="container">
    <hr>
        <div class="text-center center-block">
            <p class="txt-railway">- Einde -</p>
            <br />
                <a href="https://www.facebook.com/bootsnipp"><i id="social" class="fa fa-facebook-square fa-3x"></i></a>
                <a href="https://twitter.com/bootsnipp"><i id="social" class="fa fa-twitter-square fa-3x"></i></a>
                <a href="https://plus.google.com/+Bootsnipp-page"><i id="social" class="fa fa-google-plus-square fa-3x"></i></a>
                <a href="mailto:bootsnipp@gmail.com"><i id="social" class="fa fa-envelope-square fa-3x"></i></a>
</div>
    <hr>
</div>


        <!-- jQuery -->
        <script src="//code.jquery.com/jquery.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script>

</script>
    </body>
</html>

这是我正在使用的css：

body {
    background-color: #E1E3E4;
}

/* Setting default typography */
h1,h2,h3,h4,h5,h6 {
    font-family: 'Noto Sans', sans-serif;
}

h1 {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: .03em;
}

h2 {
    font-size: 27px;
    color:#4d4d4d;
}

h3 {
    color: #bebebe;
    font-size: 16,8px;
}

p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    color: #000;
    line-height: 1.5;
    padding-top:1%;
    letter-spacing: .06em;
}

a.website-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    display: inline;
}

.article-date{
    font-family: 'Noto Sans', sans-serif;
    color: #00a0e9;
    font-size: 11px;
    font-weight: bold;
}

h1 > a:link {
    text-decoration: none;
    color: #000;
}

h1 > a:visited {
    text-decoration: none;
    color:#404237;
}

h1 > a:hover {
    text-decoration: none;
     color:#404237;
     background-color: #00a0e9;
     color: #fff;
}

h1 > a:active {
    text-decoration: underline;
}

/* End of default typography */

/* Setting up div classes */

.row.index-row {
 -moz-column-width: 20em;
 -webkit-column-width: 20em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
}

.row > .col-lg-3 {
 display: inline-block;
 padding: 0;
 margin: 10px;
 width:  96%; 
 float:none;
}

.limerick {
    background-color: #fff;
    -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.article-content {
    padding: 1em .8571428571em .2857142857em;
}

.img-responsive {
    margin: 0 auto;
}

/* Styling for single.php */
/* Typography single.php if needed */
h1 {

}

h2 {

}

h3 {

}

p {

}

/* End of typography styling */

/* Author post */


/* Styling div elements for single.php */

.row.single-php-row {
 -moz-column-width: 100%;
 -webkit-column-width: 100%;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
}

.limerick.single-php-img {
    width:50%;
}





/* End of styling div elements for single.php */

Answer 1

通过查看您的实时站点，我发现了问题。它在您的另一个 CSS 文件中。

在您的 .index-row 中，您使用 column-width 的前缀版本和 Firefox/Chrome 的 column-gap。 IE 需要无前缀版本。

.row.index-row {
 -moz-column-width: 20em;
 -webkit-column-width: 20em;
 column-width: 20em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
 column-gap:10px; 
}

请将缺少的 CSS 添加到问题中，以便任何未来的用户都可以看到整个 problem/solution。

Bootstrap 3 + IE11 + HTML5 不工作

Bootstrap 3 + IE11 + HTML5 not working

html

css

respond.js

twitter-bootstrap-3