IE11 border radius and border bug

I have an odd visual bug in IE11 as you can see in image here >

http://www.jonwallacedesign.biz/ie11.png

See the odd effect on corners of the white "WHY USE US" li button....

The combination of border-radius, background-image and border: 1px solid #colour seems to be creating this odd horrid effect.

Anyone know of a solution to fix?

CSS of the LI is:

background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;

This worked for me. I am not sure if you have the same problem as me. I was getting slight white borer just around the corners.

background-clip: padding-box;

kavita

Solution:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style>
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
</style>

Please try this inside conditional CSS block.

background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;

hope this will fix your issue

This is a known bug that can be solved by putting IE11 into IE10 compatibility mode in which border-radius works fine.

Insert <meta http-equiv="X-UA-Compatible" content="IE=10" /> into head.

Instead of a background-image why not use http://css3buttongenerator.com/ to recreate this button and save on any additional requests and loading time. I was able to re-create your button and your gradient just fine in IE 11 using the above generator. Picture attached; Button image

You turn on IE10 mode by adding <meta http-equiv="X-UA-Compatible" content="IE=10" /> to head section and will work normally.

Adding a solid BG colour to IE10 + fixed this... seems like an IE bug trying to render CSS3 bits...

来源：https://stackoverflow.com/questions/22018567/ie11-border-radius-and-border-bug

标签

css

internet-explorer-11