IE11 DOM Explorer red underline - why?

Question

I would like to ask, why IE11 does not displays border-radius, justify-content and align-items in my project.

When I create new .html page these tags are supported. But not in my project. Can you please help me how to solve it? Mozilla Firefox display it right and the DOM explorer gives me no error messages.

Answer 1

Internet Explorer 10 and 11 use a squiggly red underline to indicate invalid rules.

Obviously, these are valid rules so referencing this article by John Schneider

When I looked at the CSS styles in use on the page in IE11’s built-in F12 developer tools, I noticed that the border-radius property on my form’s enclosing div was present, but it was missing its enable/disable checkbox, and the name of the style was shown with a red squiggle underline, as though IE didn’t recognize it. It seemed almost as though IE11 was behaving like a legacy browser that didn’t recognize that newer CSS property.

In fact, that did turn out to be exactly the problem. IE11 was rendering the form (running on my local IIS) with its legacy “Compatibility View” engine, which it is by default configured to do for intranet sites. (Oddly, my IE11 was not using Compatibility View to render another copy of the form that I was trying to use to debug the issue that I had IE loading via the “localhost” domain, which had me confused for a while.)

The solution was to disable IE11’s Compatibility View for intranet sites by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox. Making that configuration change immediately got IE11 to start rendering the page properly.

Answer 2

Your browser may be in compatibility mode to an older browser.

Press F12 - and check which version it's using.