IE8的边界半径

Border Radius for IE8

本文关键字：边界 IE8      更新时间：2023-09-26

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

所以，如果有人能帮助我使用一个小的jQuery或javascript插件在IE 8上实现边界半径，我将非常感激。

试试这个：

要求：

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

除了使用您在问题中描述的库之外，我认为您无法在IE8中实现弯曲角。

如果你真的想要它们，你可能会用一张图像来产生弯曲的角落效果，代价是增加带宽和混乱的代码。

根据微软：

其他圆角解决方案

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

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

  • CSS讨论Wiki，圆角：http://css-discuss.incutio.com/?page=RoundedCorners

  • SmileyCat，CSS圆角"Roundup"：http://www.smileycat.com/miaow/archives/000044.php

  • CSS Juice，使用CSS的25个圆角技术：http://www.cssjuice.com/25-rounded-corners-css/技术

看看这篇文章：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

它覆盖了IE7/8中的圆角和长方体阴影。

下面还有很多的例子

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

我过去使用过border-radius.htmc。

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

你可以在这里下载演示。

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

你对Tom Will的回答的评论表明你有很多表单输入，对吧？

我想它们的宽度基本上是一致的。

只需创建一些类，如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>');

然后适当地设计风格。

为什么不使用jQuery的角插件？

您可以很容易地将角应用于具有特定类名或ID的任何元素；例如：

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

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

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

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

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

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

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

您还可以查看jQueryUI库，我相信它有一些圆角脚本。

我希望这能帮助。。。祝你好运

您应该使用备用pie.htc，它类似，但不太bug，无论哪种方式，我都不建议使用。

在这些不符合css3的浏览器上大量使用css3元素，表现不佳，很可能是他们的系统也不及时，导致他们非常落后。因此，它们退化到一个正常的角落是有好处的。

如果你真的想让它在ie上看起来好看，你最好使用图像精灵背景，或者你会因为滞后问题而改变以赶走一些访客。

不确定以前的贡献者是否涵盖了它，但我主要使用dd_roundies库，仅圆角就可以。不过，将圆角与IE过滤器混合通常太难了。

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

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

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

支持的CSS3功能

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

您可以使用带有圆角的图像来为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/

只是另一个基于JavaScript的解决方案：Nifty Corners Cube。它以GNU GPL的形式发布，不需要jQuery。

使用此代码在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>
相关文章：