Bootstrap 3 issues in Internet Explorer

Question

My html is as

<div class="container">    
    <div class="row">
        <div class="col-lg-6" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="col-lg-4" >
            <img class="img-responsive " src="images/image1.png"></img>
        </div>
    </div>
</div>

This works perfectly in chrome and firefox , both the div inside row class come side by side, i get text on left side and image on the right. But when tested on Internet Explorer (ie8) the div with class col-lg-6 takes the entire width of the screen and so is the div with class col-lg-4 .

The style width:60% or so in percentage seems not to be recognized by Internet Explorer. But I have not defined the container width anywhere explicitly. In bootstrap.css it takes up automatically for each size.

How can I get this working on Internet Explorer properly. thanks.

Answer 1

try use this in head section

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Answer 2

Already its too late to reply to this question. Now only i came with this issue. For me it solved. Try using:

add .col-xs-12 to your responsive image.

Check the link http://www.bootply.com/116378