问题
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>
回答1:
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.
回答2:
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>)
回答3:
Your issue is trying to use respond.js with CSS stylesheets that are on external domains. Respond.js will fix media queries for IE6-IE8.
https://github.com/scottjehl/Respond#cdnx-domain-setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
回答4:
According to: https://drupal.org/node/2173441
To have your Bootstrap site working on IE8 you have to follow this steps:
- Install Respond.js files using Respond.js Module.
- Disable any CDN to load Bootstrap files.
- Install Bootstrap files locally using Bootstrap Library Module.
- Aggregate and compress CSS files in
/admin/config/development/performance
回答5:
Yes in Internet Explorer 8 or lower width of the class 'container' as 940px. But in Internet Explorer9+, Firefox, Google Chrome, etc., the width of the 'contianer' class is calling as 1170px.
The same issue is also in Zurb Foundation.
If suppose our client requested to don't consider the website to view in IE8<, then we start to implement the bootstrap, or zurb foundation RWD feature
回答6:
Here's a solution I've been working on that works with the Bones framework. It could be very easily used with bootstrap.
https://github.com/gamsim/ieresponsify
回答7:
The issue with CROSS DOMAIN css loads in IE 8 were resolved as suggested by @Akshay Raje and @Craig London.
Just to add to it, respond.js or respond.min.js must be added before respond.proxy.js for the setup to work.
回答8:
Try or follow this after all stylesheet "link" tag and just before head tag closed(),it means at the end inside the "head" tag.This format is 99% working in all websites. But in some drupal bootstrap theme does not work.
Remember save all in website local folder, Don't use CDN.
<!--[if lt IE 9]>
<script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script>
<script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script>
<script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script>
<![endif]-->
回答9:
Quite often people load CSS with media queries (bootstrap and other files) from a Content Delivery Networks (CDN, like oss.maxcdn.com or cdnjs.cloudflare.com). Respond.js doesn't work with externally loaded CSS, so you have to load your Bootstrap CSS (or other CSS with media queries) from your server.
回答10:
yeah it doesn't support IE. i am not anti bootstrap but, I review the css codes of bootstrap framework. and found out that, the other widths are not define as %, i read in other blog article that you should use % for the widths so it will responsive which is true.
and when it comes to ipad, the css code that is using for this by bootstrap is not came from media query, its just a normal css codes that was not declare inside of media queries. and it is fixed width which is you must use for ie7 & 8. (so think about it first if you want to use bootsrap.)
in future(or maybe now) when there is a new gadget that the bootstrap not supported. your client might go back to fix that issue.
we all know that the ie7 & 8 are still existing,so it should have worked on those two old browsers as well.
so if I were you, create your own framework to meet all the requirements of your site/project.
but I am not an anti bootstrap, just a thoughts... because I'm developing sites too..
来源：https://stackoverflow.com/questions/13924493/how-to-make-bootstrap-responsive-layout-work-on-ie8