在IE,FIREFOX等浏览中关于css圆角使用
[ 2010-02-05 21:33:39 | Author: none ]
IE在不完全支持CSS3的,甚至都无法完全支持CSS2.CSS3已经实现完全用CSS来实现圆角显示,现在firefox和safari浏览器都支持,唯独IE不支持.不知道新出的IE8是否支持,因为没有安装,也没有测试过.但IE也占领了浏览器大半壁江山,如果设计joomla的模板完全不考虑IE的显示效果,那是不可能的事情.
CSS3里有一个border-radius属性,有了这个模板设计者就可以忘掉PS只需把心放在CSS身上即可,最大的问题也就是IE7和IE6是不支持这个属性的.
还好有一个叫Drew Diller 已经给出了解决方案,这样可以在IE下也可以显示圆角效果,这是IE的代码:
CSS3圆角方法在非IE浏览器内:
CSS3里有一个border-radius属性,有了这个模板设计者就可以忘掉PS只需把心放在CSS身上即可,最大的问题也就是IE7和IE6是不支持这个属性的.
还好有一个叫Drew Diller 已经给出了解决方案,这样可以在IE下也可以显示圆角效果,这是IE的代码:
<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js"></script>
<script type="text/javascript">
/* IE only */
DD_roundies.addRule('.roundify', '10px');
/* varying radii, IE only */
DD_roundies.addRule('.something_else', '10px 4px');
/* varying radii, "all" browsers */
DD_roundies.addRule('.yet_another', '5px', true);
</script>
<script type="text/javascript">
/* IE only */
DD_roundies.addRule('.roundify', '10px');
/* varying radii, IE only */
DD_roundies.addRule('.something_else', '10px 4px');
/* varying radii, "all" browsers */
DD_roundies.addRule('.yet_another', '5px', true);
</script>
CSS3圆角方法在非IE浏览器内:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
There is no comment on this article.
