Question

IE8上的边框半径有问题，到现在为止我使用了pie.js，但我不推荐这个js库，因为它是错误的。如果你有一个没有多少html页面的小网站，那么使用该库是可以的，但如果你有一个繁重的应用程序，其中使用了许多不同的框架，那么就不可能使用它。 CurvyCorners或其他大型库的相同行为。

因此，如果有人可以帮助我使用小型jQuery或javascript插件在IE 8上做border-radius，我会感激生命。

Answer 1

试试这个：

需要：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>

使用Javascript：

$('.box').corner();

HTML：

<div class="box">Hello</div>

CSS：

box{
  width:150px;
  height:28px;
  padding:10px;
}

更多例子： http://jquery.malsup.com/corner/

Answer 2

如果没有使用你在问题中描述的库，我认为你不能在IE8中做弯角。

如果您真的想要它们，您可能会使用图像来提供弯曲的角落效果，但会增加带宽和杂乱的代码。

Answer 3

根据Microsoft：

其他圆角解决方案

我们想指出网上提供的大量备用解决方案。除了单独的圆角解决方案外，还有一些网站提供经常更新的圆角解决方案列表，这些解决方案与多个版本的Internet Explorer和其他浏览器兼容。

这里列出了一些我们最喜欢的聚合圆角解决方案网站。它们没有特别的顺序，并且包含任何链接并不意味着Microsoft认可该网站。

CSS-Discuss Wiki，RoundedCorners： http://css-discuss.incutio.com/?page=RoundedCorners
SmileyCat，CSS Rounded Corners“综述”： http://www.smileycat.com/miaow/archives/000044.php
CSS Juice，25个带角落的角落技巧： http://www.cssjuice.com/25-rounded-corners- techniques-with-css /

Answer 4

查看此帖子：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

它特别涵盖IE7 / 8中的圆角和框阴影。

以及下面有很多例子

http://blue-anvil.com/jquerycurvycorners/test.html

Answer 5

我过去曾使用border-radius.htc。

唯一的痛苦是CSS Urls是相对于CSS文件的。 HTC与页面相关。

you can download the demo here.

Answer 6

为什么不使用css'：before和：after伪类来添加弯角。

你对汤姆威尔的回答的评论表明你有很多表格输入吗？

我认为它们的宽度大致均匀。

只需创建一些类curved-std-width，curved-lge-width，curved-sml-width，然后您就可以在CSS中执行此操作：

.curved-std-width:before {
  height: 5px;
  background: url('curved-top-5px.png');
}

.curved-std-width:after {
  height: 5px;
  background: url('curved-bottom-5px.png');
}

这样的东西应该可以很好地运行，而不必在表单输入之前和之后添加无限的html。

否则你也可以使用jQuery来完成它：

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');

然后风格恰当。

Answer 7

为什么不使用jQuery的corner plugin？

您可以轻松地将角应用于具有特定类名或ID的任何元素;例如：

$("#box1").corner();

它还允许您装饰或修改您想要装饰元素的角落效果类型。

您还可以使用其他JavaScript解决方案，例如CurvyCorners甚至某些CSS solutions。另一种选择是使用JavaScript来包装表单输入的<div>元素，并使用CSS的背景图像来模拟圆角的外观。有关此最后解决方案的说明，请参阅this tutorial。

Answer 8

这很难看，但如果您事先知道输入字段的背景颜色（这可能是提交按钮的问题），则可能会有效：http://jsfiddle.net/563c5/1/

我不知道在普通计算机中渲染大量输入字段时它会如何表现。

IE8支持嵌入式CSS图像，所有四个圆角只需要1个小图像。任何依赖角落图像的解决方案实际上可能只需要几个额外的带宽字节。

Answer 9

我建议给Modernizr一个去，关于它的好处是你可以用它来替换旧浏览器中大多数（如果不是全部）不受支持的CSS3。我已经在许多大型网络应用程序上使用它而没有任何戏剧性。

您还可以查看我认为有一些圆角脚本的jQuery UI library。

我希望这会有所帮助......祝你好运！

Answer 10

你应该使用替代的pie.htc，它的类似的东西，但更少的错误，无论哪种方式，我不推荐它。

在这些非css3符合浏览器的情况下大量使用css3元素，表现不佳，很可能是因为他们的系统不是最新的，导致它们极其迟钝。因此，他们退化到正常角落是有好处的。

如果你真的希望它看起来不错，即你最好使用图片精灵背景，或者你会改变以驱逐一些访问者以解决滞后问题。

Answer 11

不确定它是否被之前的贡献者覆盖，但我主要使用dd_roundies库，而且仅使用圆角就可以了。使用IE过滤器混合角落通常要求太多了。

Answer 12

你试过这个：http://jquery.malsup.com/corner/

Answer 13

使用此功能： http://css3pie.com/

PIE使Internet Explorer 6-9能够呈现几个最有用的CSS3装饰功能。

支持的CSS3功能

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

Answer 14

您可以使用带圆角的图像来区分div。示例：

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

或者你做了一些魔术：

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Answer 15

另一种基于JavaScript的解决方案：Nifty Corners Cube。它作为GNU GPL发布，不需要jQuery。

Answer 16

使用此代码在IE 6 +

中获得圆角

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script>
<script>
    $('#logo-navsection').corner( function() {
        $("this").css("border-top", "0px 0px opx 10px")                
    });
</script>

IE8的边界半径

16 个答案: