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和盒子阴影。
还有如此多的例子
过去我使用了border-radius.htc 。
唯一的痛苦是CSS Url是相对于CSS文件的。 macros达电是相对于网页。
你可以在这里下载演示。
为什么不使用css':之前和之后:伪类添加弯曲的angular落。
你对汤姆威尔的回答的评论表明你有很多表单input的权利?
那么我认为他们将在宽度上大致统一。
只需要创build一些类,如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'); }
像这样的东西应该工作得很好,而不必在表单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
您可以使用圆angular的图像来框住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的解决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>