可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Does anybody have an idea on how to "fix" the rendering in IE 9 and 10 of a combination of box-shadow and border-radius?

It's especially noticeable when using inset shadows. The radius of the shadow is very different in IE compared to webkit/gecko...

In this image you can see the problem. On the left is a button with an inset box-shadow, on the right without box-shadow. (don't mind the different font-rendering)

Here's the code used: http://dabblet.com/gist/5450815

回答1:

The problem only occurs when the spread of the inset shadow triggers a larger "shadow-radius" than the size of the border-radius in IE. Set the border-radius to 50px in your example and it looks the same in IE and Chrome.

If you need a bigger box-shadow spread then you can just use a border instead, at least in your examples that would do the trick. Example: http://dabblet.com/gist/5501799

Another problem you might see is that IE and Chrome render the blur of the box-shadow totally different, but I assume you're not using it in your example for that reason...

回答2:

A quick (semi dirty) solution, which I have tried and works, is a div inside a div. Let me know if this does it.

HTML CODE:

</head>
<body>
 <div class="box"><div class="box-inside"></div></div>
 </body>
</html>

CSS CODE:

.box {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #000;
width: 200px;
height: 100px;
background: #000;
}
.box-inside {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #fff;
width: 175px;
height: 75px;
position: relative;
top: 12%;
left: 6%;
background: #fff;
}

My jsfiddle

回答3:

Try this, add this role:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');

回答4:

You can safely use inset box shadows to emulate borders in modern browsers, but IE mis-renders the radius. You can work around this by letting IE fall back to the default "outset" style.

.Button {
  color: #0ac;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #0ac;
}

/* IE media query hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .Button {
    box-shadow: 0 0 0 2px #0ac;
  }
}

回答5:

Try this: //CSS

.box {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;

    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;

    width: 200px;
    height: 100px;
}

For IE8 you have to include CSS3 pie(pie.htc) file then it will work on IE8.

You can download from here: http://css3pie.com/