Wednesday, March 05, 2014

Fix: CSS border-radius not working in Internet Explorer 11

In doing browser compatibility testing in a new web form I was developing on my PC this morning, the form looked great in all browsers I had on my local Windows 8.1 PC – except for Internet Explorer 11, where it looked awful: div and form field border corners were squared instead of rounded, form fields rendered with excess height, some text was slightly truncated, and a few other issues.

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.

13 comments:

  1. Thanks so much for this: you just saved my employer the cost of a new computer office window and possible lawsuit related to debris falling on the street below my office.

    ReplyDelete
  2. Thanks for the tip. I was having the same problem. I wonder how many tweaks I gave up using on the company's website just because it did not looked compatible on ie.

    ReplyDelete
  3. Yay - thank you!

    ReplyDelete
  4. Thanks a ton! Now if only other intranet users didn't have to go through this step :(

    ReplyDelete
  5. Hours I spent. Bloody hours. Why the clart was it rendering as IE5???? I'd buy you a drink if I could.

    ReplyDelete
  6. Thanks, this helped me as well! If I could ask a question, my ie is still not picking up my CSS styles though, how do I fix that, I tried: html data-useragent
    but still not working

    Any help would be appreciated

    ReplyDelete
  7. Thanks :-)

    Gracias, desactivandolo me funciono :)

    ReplyDelete
  8. Oh my god. You legend! Can not thank you enough!

    ReplyDelete
  9. Hello,

    thanks for the "“Compatibility View" hint, I didn't know that!

    A couple of weeks ago, I wrote about my work with iframes, border-radius and :hover:
    http://50226.de/about-google-maps-iframes-rounded-corners-hover-and-different-browsers.html

    The Internet Explorer 11 for example has generally no problems in displaying a border-radius in iframes. But the annoying thing is that it doesn't support :hover in iframes! Fortunately, there is a workaround, but you have to fall back to JavaScript.

    cheers,
    Witi

    ReplyDelete
  10. Not in a million years would I have thought of this. I figured it was some compatibility thing and was going nuts. Thanks!

    ReplyDelete
  11. Don't know if this will help anyone else but add this as the first tag in the head element.
    "meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /"
    Replace the "" with <>
    Worked for me.

    ReplyDelete
  12. I thought I have finally got the answer for hours I spent (even just realizing it was the border-radius), yet working with Windows 8.1 and Internet Explorer 11, I still have an X pattern that crosses over all elements with radius-border (with F12 tools, if I remove the border-radius the issue is fixed) also after following your tip. It doesn't happen with Chrome on that same OS.
    I am speaking from a user point-of-view, and hopefully someone has an insight about it.

    ReplyDelete