IE8 的边框半径答案

【问题标题】：Border Radius for IE8IE8 的边框半径
【发布时间】：2012-02-24 07:30:30
【问题描述】：

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

因此，如果有人可以帮助我使用一个小的 jQuery 或 javascript 插件来在 IE 8 上做边框半径，我将不胜感激。

【问题讨论】：

在 99% 的情况下，边界半径对设计来说并不重要。使用优雅的降级技术，让 IE8 保留方角。
你可以试试这个：jquery.malsup.com/corner。但我同意如果可能的话，你应该把 IE8 排除在外。
不幸的是，我在 ie8、chrome 和 ff 上必须有相同的界面
我非常幸运地使用了 pie.js，即使是繁重的应用程序。你有什么错误？
哇，真的吗？几乎所有 pie.js 的问题都在模态窗口中遇到。例如，我有一个模态窗口，里面有很多元素和一个溢出-y 滚动。现在，如果我在该模式页面上的某些按钮上应用 pie.js，当我在模式上滚动时，按钮的背景会上下滚动，最遇到的错误是：“null”为 null 或不是对象。

标签： javascript jquery internet-explorer-8 css

【解决方案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/

【讨论】：

这个库很好用。感谢您解决了我的圆角噩梦
这个特殊的库在 IE8 中的每个表单输入周围添加了大量的 div 容器（我只计算了每个输入 22...wtf？）。如问题中所述，这必须对具有大量输入的大页面产生负面的性能影响。

【解决方案2】：

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

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

【讨论】：

尝试在有超过 150 个输入、选择、textaarea 和其他要为其添加边框半径的边框的表单上执行此操作。结果是：页面将在几分钟后打开。因此，我需要一些简单的东西，比如 jQuery,js 函数。
确实如此。根据我的经验，你会被困在有角的角落，或者使用你已经说过不可能的库。
是的，看看我们如何在精彩的 IE8 上解决这个问题？我喜欢认为这个世界上有解决这个问题的人。
你不修复它 - 当乘以 150 个元素时，每个提到的解决方案都会非常缓慢。所以要么是图像，要么什么都没有。
@burebistaruler JQuery 对很多元素也不好，你知道的。 JQuery 仅限于浏览器及其功能，而页面加载由服务器完成，而呈现由浏览器完成。考虑拥有一个包含所有弯角的图像文件并执行background-positioning。客户端只需要下载一次图像，然后将其缓存在内存中。不需要几分钟，因为您只有一个文件。

【解决方案3】：

据Microsoft：

其他圆角解决方案

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

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

CSS 讨论 Wiki，圆角： http://css-discuss.incutio.com/?page=RoundedCorners
SmileyCat，CSS 圆角“综述”： http://www.smileycat.com/miaow/archives/000044.php
CSS 果汁，25 个圆角 CSS 技术： http://www.cssjuice.com/25-rounded-corners-technology-with-css/

【讨论】：

【解决方案4】：

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

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

下面还有很多例子

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

【讨论】：

【解决方案5】：

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

唯一的痛点是 CSS Url 是相对于 CSS 文件的。 HTC 是相对于页面的。

you can download the demo here.

【讨论】：

我无法在我的项目中使用 .htc 文件。

【解决方案6】：

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

然后适当地设置样式。

【讨论】：

@burebistaruler 我认为你不能指望他为圆角做一些图形，然后将它们托管在某个地方，只是为了帮助你

【解决方案7】：

你为什么不用jQuery的corner plugin？

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

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

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

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

【讨论】：

已经试过这个插件...它强制你有背景颜色。
这不是真的，我相信你可以使用.corner(cc:xxx) 来定义角元素的颜色？（其中 xxx 是您选择的颜色）。

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

嗯，我用modernizr试过一次，但知道有些东西不起作用。你有没有一个带modernizr border-radius 的小例子在IE8 上进行测试，看看它是如何工作的。
在查看了我使用的 Modernizr 后备并根据您的评论进行了一些研究后，它需要在角落使用图像 - 不再酷，所以这让我做一些研究，我发现this link 在我在 IE8 中的测试以及在 IE9 中测试的 IE6、IE7 和 IE8 浏览器模式中运行良好。我希望这对您有所帮助。

【解决方案10】：

您应该使用备用 pie.htc，它类似但错误较少，无论哪种方式我都不推荐它。

在这些不符合 css3 的浏览器上大量使用 css3 元素，表现不佳，可能是他们的系统不是最新的，导致他们非常滞后。所以他们降级到一个正常的角落是有好处的。

如果您真的希望它在 ie 上看起来不错，那么您最好使用图像精灵背景，或者您将因滞后问题而改变以赶走许多访问者。

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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/

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案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>

【讨论】：

它为我不想要的边框添加颜色，因为它与背景图像冲突。好主意！