Bootstrap 3 with respond.js and html5shiv.js still

2019-04-13 00:22发布

站内问答 / 移动开发
1262 4 4

I have a website which is running Bootstrap 3 and working perfectly on all browsers except IE8. It's the problem where the media queries aren't supported, so the content stretches as if it was run on a mobile device.

I have tried including respond.js, html5shiv.js and the html5shim from Google. Also the meta http-equiv-tag is included. The media queries still don't seem to work.

Also, I know respond.js doesn't work locally because of it's xmlHttpRequest-thingy, but this site is running on a webserver.

I've also made sure both respond.js and html5shiv.js are found and the links are not broken.

Any ideas?

4条回答
走好不送
2楼-- · 2019-04-13 00:45

Okay so the non-responsive css file wasn't exactly what we were looking for. However, we found the problem:

IE8 doesn't seem to like the @import-property.

We used a global css file which imported the necessary styles. When moving all stylesheets to the header and including them with a normal link-tag, it works.

It's weird though, the regular bootstrap styling (buttons, backgrounds and such) got imported properly. The grid system was not. I guess Internet Explorer works in mysterious and retarded ways.

查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
3楼-- · 2019-04-13 00:52

Always make sure that you load the following scripts after loading jQuery.

Especially in WordPress and other frameworks some people tend to include jQuery just before the closing tag and therefore after the html5shiv.js and respond.js script, which causes issues in IE8

<!-- Include first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.js"></script>
<![endif]-->
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
4楼-- · 2019-04-13 01:03

I had the same problem. In my case it was the QUIRKS mode that messed it up. IE can be forced to go into Quirks mode by replacing the standard (Bootstrap 3.0 suggested):

<!DOCTYPE HTML>

to 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
查看更多
0人赞 添加讨论(0) 举报
Anthone
5楼-- · 2019-04-13 01:11 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
    </head>

if you want to try in local...try through localhost, or create a QA server and set the content and try. we need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header. It will say access denied. it works only through server as ie have security restriction. :P

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)