logo标签列表

IE8的边框半径

javascriptjqueryinternet-explorer-8css
36

我在IE8上使用border-radius时遇到了问题，目前我使用的是pie.js，但我不建议使用这个js库，因为它存在缺陷。如果你有一个小网站，且页面不多，那么使用该库就足够了，但如果你有一个复杂的应用程序，其中使用了许多不同的框架，那么使用该库就不可能了。CurvyCorners或其他大型库也有相同的问题。

因此，如果有人能帮我提供一个小的jQuery或javascript插件，只用于在IE 8上实现border-radius，我将感激不尽。

95
在99%的情况下，border-radius对设计并不是至关重要的。采用优雅降级的技巧，让IE8保留方形边角。 - Simon Smith
你可以尝试这个链接: http://jquery.malsup.com/corner/。但是如果可能的话，我同意你应该把IE8排除掉。 - bfavaretto
不幸的是，我必须在IE8、Chrome和FF上使用相同的接口。 - mcmwhfy
1
我在执行大型应用时使用 pie.js 很顺利。你遇到了什么错误？ - Fresheyeball
哇，真的吗？Pie.js 几乎所有的问题都出现在模态窗口中。例如，我有一个包含多个元素和 overflow-y 滚动条的模态窗口。现在，如果我在模态页面上应用 pie.js 在某些按钮上，当我在模态窗口滚动时，按钮的背景会上下滚动，并且最常遇到的错误是：“null”为空或不是对象。 - BurebistaRuler
16个回答
40

试试这个：

要求：

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

1
这个库非常好用。感谢您解决了我关于圆角的噩梦。 - onof
10
这个库在IE8中会在每个表单输入框周围添加大量的div容器（我刚数了一下，每个输入框有22个...真是令人费解）。这对于有很多输入框的大页面来说，必然会对性能产生负面影响，正如问题描述中所述。 - Rocco
17

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

如果您真的想要它们，您可能可以使用图像来实现弯曲的角效果，但这会增加带宽和代码混乱的成本。

尝试在具有150多个输入、选择、文本区域和其他边框的表单中进行操作，您希望为其添加边框半径。结果是：页面将在几分钟内打开。因此，我需要像jQuery、js函数这样简单的东西。 - BurebistaRuler
没错。根据我的经验，你要么会被困在角落里，要么使用一个库，而你已经说过这是不可能的。 - Tom Will
是的，那么我们如何在美妙的IE8上解决这个问题呢？我想在这个世界上有人已经解决了这个问题。 - BurebistaRuler
2
你不能修复它——每个提到的解决方案在乘以150个元素时都会非常缓慢。所以要么是图片，要么什么都没有。 - Litek
3
JQuery在处理大量元素时也不是很好。JQuery受限于浏览器及其功能，而页面加载由服务器完成，渲染由浏览器完成。考虑使用一个图像文件包含所有圆角，并进行background-position处理。客户端只需要下载一次该图像文件，然后将其缓存在内存中。因为只有一个文件，所以不会花费几分钟的时间。 - ShadowScripter
显示剩余3条评论
6
根据 Microsoft： 其他圆角解决方案 我们想指出网络上有大量可用的替代方案。除了单独的圆角解决方案外，还有一些网站提供经常更新的圆角解决方案列表，这些解决方案与多个版本的Internet Explorer和其他浏览器兼容。
以下列出了我们收集的一些聚合圆角解决方案的网站，它们没有特定的顺序，并且包含任何链接并不意味着Microsoft对该网站的认可。
5
4
我无法在我的项目中使用 .htc 文件。 - BurebistaRuler
3

为什么不使用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>');

然后适当地进行样式设置。

1
@burebistaruler 我认为你不能期望他为圆角做一些图形，然后将它们托管在某个地方，只是为了帮助你完成这个。 - yunzen
3

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

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

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

它还允许您装饰或修改您想要点缀元素的角落效果。 您还可以使用其他JavaScript解决方案，如CurvyCorners，甚至一些CSS解决方案。 另一个选项是使用JavaScript包装<div>元素和使用CSS的background-image来模拟圆角的外观。 有关此最后一种解决方案的说明，请参见this tutorial。
已经尝试过这个插件了，它强制要求你有一个背景颜色。 - BurebistaRuler
这不是真的，我相信你可以使用.corner(cc:xxx)来定义角落元素的颜色吗？（其中xxx是您选择的颜色）。 - Houdmont
2

如果您事先知道输入字段的背景颜色（对于提交按钮可能存在问题），那么以下代码看起来可能比较丑陋但仍可用：http://jsfiddle.net/563c5/1/

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

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

1

使用这个：http://css3pie.com/

PIE使得Internet Explorer 6-9能够呈现一些最有用的CSS3装饰特性。

支持的CSS3特性

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

我建议尝试使用Modernizr，它的好处是可以用它来替换大多数（如果不是全部）旧浏览器中不支持的CSS3。我已经在许多大型Web应用程序上使用它而没有任何问题。

您还可以查看jQuery UI库，我相信其中有一些圆角脚本。

希望这可以帮到您...祝您好运！

1
嗯，我曾经尝试过使用Modernizr，但是有些东西似乎没有起作用。你有一个使用Modernizr的border-radius的小例子吗？我想在IE8上测试一下它的效果。 - BurebistaRuler
在查看了我使用的Modernizr回退并根据您的评论进行了一些研究后，它需要在角落处使用图像-不再酷，因此这促使我进行了一些研究，在其中我发现此链接，在我的测试中在IE8以及在IE9中测试了IE6、IE7和IE8浏览器模式，效果很好。希望这能对您有所帮助。 - Ryan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接