【发布时间】：2016-05-30 17:04:03
【问题描述】：
我的页面在 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 */
【问题讨论】：
-
“正常显示”是什么意思？您看到了哪些具体问题？
-
抱歉有点笨，不包括在内，好吧，在 chrome 上它就像一个砖石网格，在 IE 中它只是为每篇文章使用全宽。
-
我在 IE11 中没有发现任何问题。你能在小提琴中重新创建它吗？
-
嗨，你可以在 www.mijnlimericks.nl/wordpress 上看到一个活生生的例子
标签： html css twitter-bootstrap-3 respond.js