IE8边界半径

我有IE8的边框半径问题,直到现在我用pie.js,但我不推荐这个js库,因为是越野车。 如果你有一个小网站没有很多的HTML页面,那么使用这个库是不行的,但是如果你有一个使用了很多不同框架的应用程序,那么就不可能使用它。 CurvyCorners或其他大型库的行为相同。

所以如果任何人都可以用一个小的jQuery或JavaScript插件来帮我做IE8的border-radius,我会感激不尽。

尝试这个:

要求:

<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中做弯曲的angular落。

如果你真的想要它们,你可能可以使用一个图像来提供弯曲的angular落效果,代价是增加带宽和乱码。

据微软称 :

其他圆angular解决scheme

我们想指出networking上可用的备用解决scheme的丰富性。 除了个别圆angular解决scheme外,还有一些经常更新的圆angular解决scheme列表的网站,这些解决scheme与多个版本的Internet Explorer和其他浏览器兼容。

这里列出的是我们最喜欢的聚合圆angular解决scheme的网站。 它们以不特定顺序呈现,并且包含任何链接并不意味着Microsoft对该网站的认可。

  • CSS – 讨论维基,RoundedCorners: http ://css-discuss.incutio.com/?page=RoundedCorners

  • SmileyCat,CSS圆angular“Roundup”: http ://www.smileycat.com/miaow/archives/000044.php

  • CSS果汁,25圆angular技术与CSS: http : //www.cssjuice.com/25-round-corners- techniques-with-css /

看看这个post: http : //www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

它包含了IE7 / 8中特定的圆angular和盒子阴影。

还有如此多的例子

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

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

唯一的痛苦是CSS Url是相对于CSS文件的。 macros达电是相对于网页。

你可以在这里下载演示。

为什么不使用css':之前和之后:伪类添加弯曲的angular落。

你对汤姆威尔的回答的评论表明你有很多表单input的权利?

那么我认为他们将在宽度上大致统一。

只需要创build一些类,如curved-std-widthcurved-lge-widthcurved-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'); } 

像这样的东西应该工作得很好,而不必在表单input之前和之后添加无穷的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的angular落插件 ?

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

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

它还允许您修饰或修改要装饰元素的angular落效果的types。

您也可以使用其他JavaScript解决scheme,如CurvyCorners甚至一些CSS解决scheme 。 另一个select是使用JavaScript来包装<div>元素的表单input,并使用CSS的背景图像来模拟圆angular的外观。 有关最后一个解决scheme的说明,请参阅本教程 。

这是丑陋的,但可能工作,如果你事先知道input字段的背景颜色(这可能是提交button的问题): http : //jsfiddle.net/563c5/1/

我不知道如何在一台普通的计算机上渲染大量的input字段。

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

我build议给Modernizr一个去,伟大的事情是你可以用它来replace大多数(如果不是全部)不支持的CSS3在旧的浏览器。 我已经在一些大型的networking应用程序没有任何戏剧使用它。

你也可以看看我相信有一些圆angular脚本的jQuery UI库 。

我希望这有助于…祝你好运!

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

在这些非css3兼容浏览器上大量使用css3元素,performance不佳,可能是因为他们的系统不是最新的,导致它们非常滞后。 所以对他们来说,降到正常的angular落是有好处的。

如果你真的希望它看起来很好,即最好的使用图像精灵背景,或者你将改变,以赶走一些访问者的滞后问题。

不知道它是否被前面的贡献者所覆盖,但我主要使用dd_roundies库,并单独使用圆angular,它工作正常。 与IEfilter混合angular落通常是太多问不过。

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

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

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

支持的CSS3function

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

只是另一个基于JavaScript的解决scheme: Nifty Corners Cube 。 它作为GNU GPL发布,不需要jQuery。

使用此代码在IE 6 +中获得圆angular

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