html - Bootstrap 3 + IE11 + HTML5 不工作

标签 html css twitter-bootstrap-3 respond.js

我在让我的页面在 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 */

最佳答案

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

在您的 .index-row 中，您正在为 Firefox/Chrome 使用带前缀的 column-width 和 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 添加到问题中，以便任何 future 的用户都能看到整个问题/解决方案。

关于html - Bootstrap 3 + IE11 + HTML5 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29220680/

上一篇：html - 为什么我的 CSS 文件中的背景图片没有应用于我的网页？

下一篇：javascript - 如何根据高度过滤元素以适合容器

相关文章：

javascript - 如何在单击按钮时更改 map 元素的高度？

html - 如何底部对齐 flex 元素内的元素？

jquery - 在移动设备上向上/向下滚动后如何显示 "Show/Hide"Bootstrap 3 内容？

html - 摆脱表格中的填充

jQuery FadeOut div 工作 - .load 然后 .fadeIn div 没有

javascript - 将 Canvas 定位在 <img> 元素上

css - 使用 Bootstrap 在 ng-show 之后移动 Div

jquery - Bootstrap select destroy 从 DOM 中删除原始 select

php - 网站左侧有一个 "1"。我不知道它从哪里来

html - 图像不使用 CSS 重新缩放

©2024 IT工具网  联系我们