5

How come when I put border-radius on a certain element in a certain file, it's not being rendered correctly with a border-radius and has a red curly line beneath the border-radius property in Internet Explorer 11?

enter image description here

When I try to do the same in my own custom HTML file:

<div style="width: 100px; height: 100px; background-color: red; border-radius: 5px;"></div>

Internet Explorer does not have any problems rounding those edges?

enter image description here

Can anyone tell me what is going on, since I never work with Internet Explorer myself?

Does a red curly line beneath a CSS property in Internet Explorer mean it does not recognize the property?

Barrosy
  • 1,407
  • 2
  • 25
  • 56
  • Does it work in other browsers? Are you copying and pasting the `border-radius` text (possibly invisible/zero-width characters are being preserved from somewhere)? – David Thomas Feb 19 '16 at 15:34
  • You're adding it to your link on hover. Is this indented? Or do you want this to show all the time? When you add it in-line, you're adding it to a `
    ` but in your CSS, you're adding it to an ``
     – ntgCleaner Feb 19 '16 at 15:34
  • Are you running in [compatibility mode](http://windows.microsoft.com/en-us/internet-explorer/use-compatibility-view#ie=ie-11)? – JDB Feb 19 '16 at 15:34
  • 3
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Feb 19 '16 at 15:36
  • doesn't `display:block` on `a` element help? – Gene R Feb 19 '16 at 15:40
  • @Paulie_D Yes but the problem for that is that HTML is rendered through PHP therefor unable to copy/paste the HTML here. Big function retreiving some HTML from somewhere and if it was for the sake of fixing this problem I already would try to reproduce it myself. Basically it's old code and I should search through it according to your comment, while the answer might be more obvious then spending hours trying to find where things go wrong. – Barrosy Feb 19 '16 at 15:44
  • @GeneR I just tried it and does not seem to be of any help. Thanks for your effort though. – Barrosy Feb 19 '16 at 15:54

2 Answers2

8

The curly line in IE Inspector only appears, when Emulation mode is set to IE8 or below - thus indicating that this property is not supoorted in current mode.

If you are using IE11 in Edge mode, however, you might have some meta-attribute which force compatibility mode like 

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Or, perhaps your windows client is configured to use comaptibility mode by default,
see this answer for details:
Internet Explorer 11 disable "display intranet sites in compatibility view" via meta tag not working

Community
  • 1
  • 1
mtness
  • 997
  • 9
  • 28
  • This was what was happening to the page I was viewing. Seems like the previous developer of the page left me this messy tag. Thank you for this answer. – Barrosy Feb 22 '16 at 08:15
  • This just happened to me. It's an ASP.NET page that was configured to be compatible with IE7. Yes you read that right, IE7 which was released in 2006. I am not able to change it either without a formal testing process to certify the page would still work! :-o – CaptainGenesisX Dec 18 '20 at 15:14
0

Try to disable IE11’s Compatibility View by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox.

David H.
  • 953
  • 1
  • 8
  • 20