带/不带 JavaScript 的 IE 7+ 中的圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4471205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners in IE 7+ with/without JavaScript?
提问by Scott B
To create rounded corners on my container elements I use this CSS:
为了在我的容器元素上创建圆角，我使用了这个 CSS：
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
但是，IE 似乎无法识别和解释 border-radius 属性（至少是 7-8 版，显然它计划用于 9 版）。
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
是否有完全在 CSS 中可行的解决方法（没有脚本，没有额外的标记）？
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?
对于 JavaScript/jQuery 解决方案：如果我可以包含一个脚本来读取我的 CSS、解释边框半径属性（包括边框左上角半径、边框右上角），我将使用基于这些的解决方案radius)，并相应地应用角落。这存在吗？
回答by Kyle
As far as I know for IE<9 there is no way to do this in pure CSS.
据我所知 IE<9 没有办法在纯 CSS 中做到这一点。
It has been documented that IE9 has border radius support.
已经证明 IE9 具有边界半径支持。
There are Javascript workaroundsavailable, but as you said you don't want to implement them, you're a bit stuck.
有可用的Javascript 解决方法，但正如您所说，您不想实现它们，您有点卡住了。
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
除非您想使用图像，否则如果您有静态大小元素，这很有效，但如果它们更改大小，则不起作用。
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
除此之外，我不知道任何没有大量 hacky 标记的纯 CSS 解决方案。
Update:
更新：
I already linked to a resource that can do this for you, the CurvyCornersjQuery will detect the use of -webkit-border-radiusand moz-border-radiuson DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
我已经链接到可以为您执行此操作的资源，CurvyCornersjQuery 将检测DOM 元素的使用-webkit-border-radius和moz-border-radiusDOM 元素，并使用一系列没有图像的小型 DIV 在 IE 中复制效果。您还可以告诉它将效果应用于特定元素。
Update #2:
更新#2：
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviourwhich only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
在 Spudley 建议检查CSS3Pie 之后，我非常建议这样做，因为它使用behaviour仅适用于 IE的 CSS 属性，因此它不会与其他浏览器混淆，这也意味着没有 hacky添加到您的页面的标记（Curvy Corners 添加了许多小 div）并且不使用图像。
Hope it helps :)
希望能帮助到你 ：）
回答by Spudley
You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
您需要一种无需编写脚本且无需任何额外标记的方法。这根本不可能。IE7/8 中缺少该功能，而让 IE 做到这一点的唯一方法是使用脚本或标记来模拟该功能。
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Piestands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
最好的选择是那些只影响 IE 并且对其他浏览器不可见的选项。这意味着CSS3Pie 领先于所有其他选项，因为它使用的技术仅受 IE 支持。它还允许您以与其他浏览器相同的方式在 CSS 中指定边框半径，使其更加一致。
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
就个人而言，我每次都会选择这个解决方案。到目前为止，它是您为 IE 找到的最干净的解决方案。忘记任何 jQuery 或纯 javascript 解决方案；他们几乎都有这样或那样的问题，至于涉及角图形的标记选项；只是想都别想！
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
CSS3Pie 相对于其他常见解决方案的真正优势在于它使用基于矢量图形的解决方案，而不是像 CurvyCorners 和其他人那样将大量 div 粘贴到您的文档中。这意味着 CSS3Pie 生成的圆角可以平滑绘制，并且可以与元素本身及其背后的背景图形一起正常工作。大多数其他解决方案在这些领域都存在严重问题。
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.
我不知道你为什么反对使用脚本——尤其是像这样的基于 HTC 的脚本，它不会妨碍其他脚本。最糟糕的情况是用户关闭了脚本。在那种情况下，他们得到的只是方角；这不是世界末日。
回答by achairapart
I don't think there's a way to do this without scripting.
我认为没有脚本就没有办法做到这一点。
I saw this project: http://css3pie.com/
我看到了这个项目：http: //css3pie.com/
But it still requires a script loaded as an HTC behaviour.
但它仍然需要作为 HTC 行为加载的脚本。
Anyway, my best answer is just to leave the corners squared in IE (by the way, it seems IE9 will support border radius) applying the graceful degradationprinciple.
无论如何，我最好的答案是在 IE 中保留角的平方（顺便说一下，IE9 似乎将支持边界半径）应用优雅降级原则。
Many websites do this, including very popular ones: see twitter.com(it just looks all squared in IE)
许多网站都这样做，包括非常受欢迎的网站：请参阅twitter.com（它在 IE 中看起来都是方形的）
回答by Fatih Acet
you can use .htc for border radius.
link1 for htc files
link2 for htc files
您可以使用 .htc 作为边界半径。
链接 1 为 htc 文件链接 2
为 htc 文件
I suggest to have a look at this site.
CSS3 Please
我建议看看这个网站。
CSS3 请
回答by jeroen
The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.
您正在谈论的脚本/jQuery 解决方案确实存在，请查看jQuery Curvy Corners。
