{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 狗以群分 的问题《How to make Bootstrap responsive layout work on IE》','https://www.manongdao.com/q-1309418.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
According to: https://drupal.org/node/2173441
To have your Bootstrap site working on IE8 you have to follow this steps:
/admin/config/development/performanceThe 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.
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:
It must be included before the <body> element (i.e. in the <head>)
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