问题
I have an odd visual bug in IE11 as you can see in image here >
(source: jonwallacedesign.biz)
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;
回答1:
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;
回答2:
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>
回答3:
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
回答4:
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
回答5:
You turn on IE10 mode by adding <meta http-equiv="X-UA-Compatible" content="IE=10" /> to head section and will work normally.
回答6:
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