I've been search for a while and found some people got it working, but none of them provide any code samples.
I tried their suggestions but it didn't work for me. By suggestions, I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge" />
, respond.js
or css3-mediaqueries-js
, but none of them helped.
Here's a jsfiddle, if you view it with IE8, you'll see both a
and b
are on the same row regardless of your browser width.
But if you view with Chrome, FF or IE9 or above, you'll see them on different rows or single row depending on the browser width.
UPDATE
I tried to uncomment one of them (css3-mediaquery, html5shiv and respond) at a time but got no luck with any one of them.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span8">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
<%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
<%--<script type="text/javascript" src="js/respond.js"></script>--%>
</script>
</body>
</html>
IE 8 doesn't support media queries out of the box.
Based on this question and this question, you're going to want to use an extension like css3-mediaqueries-js or Respond.
Try using html5shiv, its basically a HTML5 IE enabling script and that should get bootstrap working in IE 6,7 and 8. This can also be directly hot linked like this:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
It must be included before the <body> element (i.e. in the <head>)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With