1

I seem to be having some strange issues with IE 11. Nothing is contained like it is in Chrome and everything is overflowing like crazy.Everything looks fine in Chrome and Safari and any mobile browser, but IE11 is struggling.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Forward | Reimagining adn.com</title>
    <meta name="description" content="Reimagining adn.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body ng-app"myApp" ng-cloak>
   <div ng-view=""></div>
  <body>
</html>

And here is a snippet of one of my routes:

<div class="section-b">
    <div class="container-fluid">
        <div class="row vertical-align">
            <div class="col-lg-3 col-lg-push-8 col-sm-12"><img alt="Alaska"
            class="img-responsive intro-img" src=
            "images/introduction_a.jpg"></div>

            <div class="col-lg-6 col-lg-offset-1 col-lg-pull-3 col-sm-12">
                <div class="clearfix"></div>

                <p class="lead">Some text will go here</p>
            </div>
        </div>
    </div>
</div>

In the screenshot below the white area is the text-area and that's an img-responsive, the default width of the page is meant to be the same size as the last image as it's set to 100%. Any suggestions? I'm hoping it's something really simple.

enter image description here

hufflapuff
  • 215
  • 2
  • 12
  • Welcome to the horrors of `IE` .. Can you confirm you don't have any compatibility mode running ? IE7 emulation for example – Pogrindis Jul 22 '15 at 08:57
  • @Pogrindis I actually just figured it out. It's my display: flex that's doing it. Is there a way to use it without it breaking IE? – hufflapuff Jul 22 '15 at 08:58
  • Perhaps this will help then ? http://stackoverflow.com/questions/21600345/flexbox-and-internet-explorer-11-displayflex-in-html – Pogrindis Jul 22 '15 at 09:00

0 Answers0