I am trying to develop a responsive template using bootstrap3. It is show perfect result for all major browser except IE8. I have created 3 col in a row. But in desktop for IE8 it is only show 1 col in 1 row . That means IE8 shows tab or mobile version on desktop. I have used html5sive.js and respond.js in head section. I have also run bootstrap jumborton example. But the same result. This is the code that is not showing correctly-
Featured Products
<div class="col-sm-4 col-xs-12 col-lg-4 col-md-4 ">
<div class="product">
<div class="product-img ">
<img class="img-responsive" src="img/show1.png" alt="" />
</div>
<div class="row product-description">
<div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
<img class="product-logo" src="img/show1-icon.png" alt="" />
</div>
<div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
<h4>Stylish Brown Leather Shoes</h4>
<p><strong>$599</strong></p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 col-padding">
<a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-lg-4 col-md-4 ">
<div class="product">
<div class="product-img">
<img class="img-responsive" src="img/show2.png" alt="" />
</div>
<div class="row product-description">
<div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
<img class="product-logo" src="img/show2-icon.png" alt="" />
</div>
<div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
<h4>Elegant Green Wonderful Shoes</h4>
<p><strong>$599</strong></p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 col-padding">
<a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4 ">
<div class="product">
<div class="product-img">
<img class="img-responsive" src="img/show3.png" alt="" />
</div>
<div class="row product-description">
<div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
<img class="product-logo" src="img/show3-icon.png" alt="" />
</div>
<div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
<h4>Women Cream and Beautiful Shoes</h4>
<p><strong>$599</strong></p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 col-padding ">
<a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to develop a responsive template using bootstrap3. It is show perfect result for all major browser except IE8. I have created 3 col in a row. But in desktop for IE8 it is only show 1 col in 1 row . That means IE8 shows tab or mobile version on desktop. I have used html5sive.js and respond.js in head section. I have also run bootstrap jumborton example. But the same result. This is the code that is not showing correctly-
Featured Products
<div class="col-sm-4 col-xs-12 col-lg-4 col-md-4 ">
<div class="product">
<div class="product-img ">
<img class="img-responsive" src="img/show1.png" alt="" />
</div>
<div class="row product-description">
<div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
<img class="product-logo" src="img/show1-icon.png" alt="" />
</div>
<div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
<h4>Stylish Brown Leather Shoes</h4>
<p><strong>$599</strong></p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 col-padding">
<a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-lg-4 col-md-4 ">
<div class="product">
<div class="product-img">
<img class="img-responsive" src="img/show2.png" alt="" />
</div>
<div class="row product-description">
<div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
<img class="product-logo" src="img/show2-icon.png" alt="" />
</div>
<div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
<h4>Elegant Green Wonderful Shoes</h4>
<p><strong>$599</strong></p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 col-padding">
<a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4 ">
<div class="product">
<div class="product-img">
<img class="img-responsive" src="img/show3.png" alt="" />
</div>
<div class="row product-description">
<div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
<img class="product-logo" src="img/show3-icon.png" alt="" />
</div>
<div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
<h4>Women Cream and Beautiful Shoes</h4>
<p><strong>$599</strong></p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 col-padding ">
<a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
- possible duplicate of IE8 issue with Twitter Bootstrap 3 – Bass Jobsen Commented Sep 26, 2013 at 17:32
- keep trying. It should work. Do you use cdn versions? Try local versions. You got the mobile version cause the media queries provide by respond.js won't work / load. You will see the mobile first version in ie8 – Bass Jobsen Commented Sep 26, 2013 at 17:56
- i have used local version . You can check it here dl.dropboxusercontent./u/168659703/Heavenly/index.html – user2796803 Commented Sep 27, 2013 at 7:05
- 1 got the solution here stackoverflow./questions/15127040/… and thanks to Peter_B – user2796803 Commented Sep 27, 2013 at 18:40
1 Answer
Reset to default 2Im not fan of ie but it seems you have to use the ua-patible
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=EmulateIE8,IE=7,IE=EmulateIE7" />