Flexbox and IE11

HTML & CSS
1

Unfortunately, I cannot post the complete page code to illustrate what I am referencing. The issue is pretty simple:

Image is pushing down content (EI11 only). The original image is large for responsiveness and being resized to 50% on the desktop large breakpoint. An interim fix has been to resize the image to the exact size of the desktop large which takes away the extra space that is pushing down content.

I am leaning to the problem rooted to the FlexBox framework used and it not being fully compatible to IE11
https://caniuse.com/#feat=flexbox
=======================================>

<img class="right-asset" alt="Images of researchers, statisticians, mathematicians." src="/nationsreportcard/subject/researchcenter/images/img-researchers2.png">

media="screen and (min-width: 1200px)"

#PageBody #MainContent .right-asset {
    position: relative;
    float: right;
    right: 0;
    width: 50%;
    margin-left: 20px;
    margin-bottom: 20px;
    border: 1px solid #c69214;
    box-shadow: 0 3px 6px rgba(54,54,54,.15);
    top: 3px;
}
2

Unfortunately, you have not posted enough code for us to reproduce the problem. :slight_smile:

You have absolutely no flex rules in that snippet of code.

If you want help, you need to create a test case that follows the structure of the code you cannot post, which shows the problem in IE11.

2 Likes
3

Then it should be easy to create a codepen demo or similar :slight_smile:

IE11 has a few flex bugs but ‘most’ can be fixed with small changes. If you can’t post a demo that exhibits the problem we will have zero chance of guessing other than running through a known list of ie11 flexbox bugs.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.