Hey everybody,
Just realized a huge issue, our sites are showing terribly in Internet Explorer 11. I’ve asked Webflow support for help on this topic and they told me to use floats and columns, but that’s probably not going to solve all the issues I’m having across 100 or so sites.
Did anybody come across this issue? If so, are there any workarounds/tips/tricks/suggestions?
Thanks!
IE doesn’t handle well neither flex or grid, so their advice is the correct one, you have to use only columns. But I would personally do it only if my market is full of people using IE, otherwise I would just insert a script to redirect people on IE to a landing page that asks them to update their browser. IE is full of technical flaws, and has a lot of security bugs and zero day exploits that will not be fixed by Microsoft, since it’s considered a dead browser, it’s really unsafe to keep browsing using IE Security Update Guide - Microsoft Security Response Center
If you used flex to build your site, it will work just fine in IE11 as long as you explicitly define a width on parent elements. Even if the width is “auto” meaning its implicitly “100%” you have explicitly set 100%. I’ve had to support IE11 multiple times and it’s been done with flex every time.
If you built with Grid, @pietrofalco is correct in that IE11 does not support Grid at all. So, you’ll have to adjust this by using Flex instead. Simply convert your grid elements to flex and adjust your child elements accordingly. If you have a complex layout, it could take some work.
Columns / floats are unnecessary and can be avoided entirely.
Given your “fix it” options, I would 2nd Pietro’s comment about providing the user a message to upgrade their browser. I’ve found that most of the time it’s people that did not know they needed to nor could upgrade their browser.
Lastly, if your client insists on having IE be supported fully, make them pay for it no matter how long the project has been in production. Make it painful (costly) so they’ll make the less painful choice (message to upgrade their browser).
Here is more information on IE11 directly from Microsoft: https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support
Thanks for the response guys! I think I’ve worked out a solution here.
Interesting to see how bad it is to continue use of IE11. Unfortunately, IE11 is our 3rd most popularly used browser and end of support for IE11 specifically doesn’t actually end until 2025 which means we can’t really say no one is using it anymore.
Anyways, thanks again.
@flowpros sorry to jump in this thread but had a similar issues recently. The Facebook group was great and also said IE can’t handle grids. When I’ve followed online tutorials they’ve said to avoid columns and use grids (I’m very new to webflow). How would I change this section of my site so it uses flex not grid and look ok in IE? At the moment instead of seeing 5 boxes they are stacked on top of each other in IE so users only see the 5th box ‘moodle’
Hi there! I’m curious to hear what you ended up doing to solve this issue here!
Hey!
Another responder provided a really great video on this:
Swapping from Grid to Flex for IE support - Watch Video
If you use Flow instead of Grid it should help. I’m not a developer so I don’t have a lot of details but this detail helped a TON
