边界半径但没有边框的DIV

I have a div with border-width: 0px; and border-radius: 5px; (or -moz-border-radius etc.).

我有一个边框宽度的div：0px;和border-radius：5px; （或-moz-border-radius等）。

In Chrome, Safari and Firefox this works very well, the div gets rounded corners, so it is transparent in the corners.

在Chrome，Safari和Firefox中，这种效果非常好，div会产生圆角，所以在角落里它是透明的。

IE9 however, does not display the rounded corners (I checked, IE is really in "IE9 mode", I have a HTML5 doctype and set X-UA-Compatible to IE=edge). It only does if I add

IE9然而，不显示圆角（我检查过，IE实际上处于“IE9模式”，我有一个HTML5 doctype并设置X-UA-Compatible到IE = edge）。只有我添加才会这样做

border-style: solid;
border-width: 1px;

Can I get IE9 to render rounded corners without declaring an actual border?

我可以让IE9渲染圆角而不声明实际的边框吗？

2 个解决方案

#1

The problem was that the div was filled with a gradient. Since IE9 does not support CSS gradients, I had to use

问题是div充满了渐变。由于IE9不支持CSS渐变，我不得不使用

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#79D5FF', endColorstr='#08609A');

and this does not work with rounded corners, i.e., border-radius does not cut off the corners of the gradient.

并且这不适用于圆角，即border-radius不会切掉渐变的角。

#2

Have you tried using border-top-left-radius, border-top-right-radius etc. for example? I've used something similar before for rounded corners on div's and it worked in IE9/Chrome/FF, not IE8 though.

您是否尝试过使用border-top-left-radius，border-top-right-radius等？我之前使用类似于div的圆角的东西，它在IE9 / Chrome / FF中工作，但不是IE8。

#1