How to fix IE rendering of border-radius combined

2019-03-19 12:10发布

站内问答 / HTML/CSS
1766 5 5

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)

enter image description here

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

5条回答
走好不送
2楼-- · 2019-03-19 12:38

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;
  }
}
查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2019-03-19 12:40

Try this, add this role:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
4楼-- · 2019-03-19 12:51

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...

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
5楼-- · 2019-03-19 12:58

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

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
6楼-- · 2019-03-19 12:58

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)