Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Right padding for .media-left increases element height in IE 10 with flexbox enabled

Created by: heikojansen

Using Flexbox enabled v4 Alpha 3 CSS and this HTML:

<!Doctype html>
<html>
  <head>
    <title>IE 10 media object flexbox problem</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style type="text/css">
      body { background-color: #ffa; max-width: 500px; margin: 0 auto; }
      .media { background-color: #aff; }
      .media-left { background-color: #faa; }
    </style>
  </head>
  <body>
    <div class="media">
      <a href="#" class="media-left">
        <img alt="64x64" class="media-object" style="width: 64px; height: 64px; background-color:#999" src="">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Text needs to be short to expose the problem.
      </div>
    </div>
  </body>
</html>

I get this in Firefox 47.0.1 and also in IE11: ff47

But this in IE 10 (Virtual Machine with IE 10 on WIN 7 downloaded from modern.ie): ie10