最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Twitter-Bootstrap respond.js not working for IE8 - Stack Overflow

programmeradmin2浏览0评论

I'm still having some problems getting my Twitter-Bootstrap page to display the desktop view correctly in IE8. I've been following a few threads here but the voted up advice is just not working for me.

Using the suggested meta tag

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Included local versions of bootstrap.css, html5shiv.js, respond.js, ie8-responsive-file-warning.js

Here is my head section:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SunTrust Equity Line Options">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">

<title>SunTrust &ndash; Your Equity Line is Maturing. What are your options?</title>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="dis/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="dist/js/html5shiv.js"></script>
  <script src="dist/js/respond.js"></script>
<![endif]-->

And the end of it:

<script src=".10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$("a[rel=popover]")
    .popover()
    .click(function(e) {
        e.preventDefault();
     });
 </script> 
</body>
</html>

I'm still having some problems getting my Twitter-Bootstrap page to display the desktop view correctly in IE8. I've been following a few threads here but the voted up advice is just not working for me.

Using the suggested meta tag

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Included local versions of bootstrap.css, html5shiv.js, respond.js, ie8-responsive-file-warning.js

Here is my head section:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SunTrust Equity Line Options">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">

<title>SunTrust &ndash; Your Equity Line is Maturing. What are your options?</title>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="dis/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="dist/js/html5shiv.js"></script>
  <script src="dist/js/respond.js"></script>
<![endif]-->

And the end of it:

<script src="http://code.jquery./jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$("a[rel=popover]")
    .popover()
    .click(function(e) {
        e.preventDefault();
     });
 </script> 
</body>
</html>
Share Improve this question asked Jan 10, 2014 at 22:48 Terri SwiatekTerri Swiatek 4872 gold badges11 silver badges21 bronze badges 5
  • see this stackoverflow./questions/15127040/… it will help you – 2dar Commented Jan 10, 2014 at 22:50
  • @2dar That answer doesn't seem to apply to this code. – Blazemonger Commented Jan 10, 2014 at 22:51
  • I've reviewed the stackoverflow thread suggested above. None of the items listed there seems to help it. – Terri Swiatek Commented Jan 13, 2014 at 14:08
  • Are you running this locally or from a server? respond.js will only work in the latter case. See github./scottjehl/Respond#support--caveats – Olly Hodgson Commented Jan 15, 2014 at 14:32
  • I am running it on a server not locally. You can view it here (bit.ly/1j1AW4i) – Terri Swiatek Commented Jan 16, 2014 at 14:39
Add a ment  | 

5 Answers 5

Reset to default 8

Try using local copy of bootstrap. This solved my problem with IE8.

Well I've asked several people and read a ton on this and still no answer on this. Seems like the only way to fix it is to call an IE8 only style sheet to get things to display correctly.

Event the getbootstrap. examples don't work in IE8 they all stack the same way mobile first in IE8.

It's a shame really since I won't be able to use it for most projects.

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./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]--> 

i see you are using "dis/js/..." in one place and "dist/js/" in other places. Are you sure your paths are correct? I would double check the browser is actually loading the files you think its loading.

or it could be the duplication of conditional ments, try this for grins: (of course fix the paths in the below code too if "dis" or "dist" is incorrect)

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>
    <script src="dis/js/ie8-responsive-file-warning.js"></script>
    <script src="dist/js/html5shiv.js"></script>
    <script src="dist/js/respond.js"></script>
<![endif]-->

I'm also not familiar with ie8-responsive-file-warning.js, i would try removing that if all else fails to be sure its not conflicting with respond.js. For that matter remove html5shiv as well just to rule out all conflicts.

We discovered that having css links outside of the "head" section (essentially that for the bootstrap css) broke respond.js's ability to provide the necessary media query support as required. Ensure that all your css links live within your "head" section.

发布评论

评论列表(0)

  1. 暂无评论