Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
heikojansen opened this issue Jul 29, 2016 · 1 comment
Closed

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

heikojansen opened this issue Jul 29, 2016 · 1 comment
Labels
css v4
Milestone
v4.0.0-alpha.6

Comments

@heikojansen
Copy link
Contributor

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
@mdo mdo added this to the v4.0.0-alpha.6 milestone Dec 22, 2016
mdo added a commit that referenced this issue Dec 23, 2016
@mdo
overhauls media object docs
2adfe4b 
- better copy and examples throughout
- callout on flexbug #12 for inline elements like links and images (which is the problem in #20408)
- add order section
@mdo mdo mentioned this issue Dec 23, 2016
Merged
@mdo
Copy link
Member

mdo commented Dec 23, 2016

You're running into Flexbug #12 where inline elements aren't counted as flex items in IE10-11. Set an explicit non-inline display (like block, inline-block, or flex) to fix it.

I'm adding a note to the docs in #21405 to help folks in the future.

@mdo mdo closed this as completed Dec 23, 2016
mdo added a commit that referenced this issue Dec 23, 2016
@mdo
overhauls media object docs
800cfa2 
- better copy and examples throughout
- callout on flexbug #12 for inline elements like links and images (which is the problem in #20408)
- add order section
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css v4
Projects
None yet
Milestone
v4.0.0-alpha.6
Development

No branches or pull requests
3 participants
@mdo @heikojansen @cvrebert