I visited the people I’m building a website for today for a bit of a design review, and I noticed on one of the computers running IE at their office, the header text and the slider text was offset to the left, yet on some of the other computers running IE it was fine. (They use a mix of Windows Vista and Windows 7).
I have attached a screenshot from IE Netrenderer, which simulates various versions of IE and you can see the numbers and address offset. I’ve since added flex box to try and rectify it but it’s still showing the same. I also used another tool which took 150+ screenshots from Firefox, Safari, Chrome and it was fine on those browsers.
Why is the text being offset on IE, and how do I stop it?
I’ve included my share link too. (It’s the home page)
When I initially saw the website on IE, flexbox was not used. I’ve since tried to use flexbox to correct the situation.
I’ve changed it back to it’s original non flex box state, and the same issue occurs.
Position absolutes - try to avoid using absolute setting too, especially on Webflow components like the container, nav, slider, tabs. If you have to use absolute, do it on a plain element like a div.
If you use absolute, most of the time the parent element should be relative.
