在IE 7+有/没有javascript的圆角？ [英] Rounded Corners in IE 7+ with/without javascript?

问题描述

要在容器元素上创建圆角，我使用css ...

  border-radius：12px; -moz-border-radius：12px; -webkit-border-radius：12px;但是，IE看起来不能识别和解释border-radius属性（至少版本7-b），因为它不能识别和解释border-radius属性（至少版本7）。
  

< 8，显然它的版本9）。

有没有一个解决方法，这是完全可以在css中完成（没有脚本，没有额外的标记）？

对于Javascript / jQuery解决方案：我将使用基于这些的解决方案，如果我可以包括一个脚本，将读取我的CSS，解释border-radius属性（包括边框-top-left-radius，border-top-right-radius），并相应地应用角。这是否存在？

解决方案

据我所知，IE< 9没有办法在纯CSS。

已经记录了IE9有边界半径支持。

有 Javascript解决方法 可用

除非你想使用图片，否则如果你有静态大小元素，但如果他们改变大小不工作。

除此之外，我不知道任何纯CSS解决方案没有很多hacky标记。 / p>

---

更新：

已与 CurvyCorners 的资源相关联的资源，jQuery将检测到 -webkit-border-radius 和 moz-border-radius ，并在IE中使用一系列小DIV没有图像。

---

更新＃2 ：

Spudley建议检查 CSS3Pi e后，非常建议这样做，因为它使用CSS属性行为，它只适用于IE，所以它不会与其他浏览器，螺丝，意味着没有hacky标记添加到您的页面（Curvy Corners添加了许多小div），没有使用的图像。

希望它有帮助：）

To create rounded corners on my container elements I use this 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).

Is there a workaround for this that's doable entirely in css (no script, no extra markup)?

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?

解决方案

As far as I know for IE<9 there is no way to do this in pure CSS.

It has been documented that IE9 has border radius support.

There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.

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.

---

Update:

I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on 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.

---

Update #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 behaviour which 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.

Hope it helps :)

这篇关于在IE 7+有/没有javascript的圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！