西门的后花园

一个热爱网络的年轻人的博客

使用IE圆角border-radius.htc时的优点和缺点

之前在写聊IT评论网的模板时,因为想美化一下网页的圆角,所以果断使用CSS3这种最方便也最为简单的方法。但firefox和webkit内核的浏览器用CSS3可以实现,但是IE这边就不行,所以只有另寻方法。

之前群里有人提到border-radius.htc方法来实现IE圆角,我当时简单的写了demo也觉得还不错,结果实际用到网站上,才发现没有那么完美。使用border-radius.htc,只需在相应的位置多加一段behavior:url(border-radius.htc);即可,非常简单。DEMO

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
behavior:url(border-radius.htc);

那么现在就把使用border-radius.htc的优点和缺点列举出来。

优点:

一、最为方便让IE实现圆角;

二、体积小,border-radius.htc才4.77kb,CSS里用到的代码也才一排。

缺点:

一、只能同时4角圆角,不能单独设置;

二、div上可以正常使用,测试text文本框,会出现异常;

三、CSS文件要和页面在同一目录下,否则无效

第三点最为蛋疼。因为当时写demo的时候,都会忽略这个问题。一般人写demo肯定会把样式表写到页面里面,或者在页面的根目录建立样式表。在页面里写样式只有一个文件,容易删除。但是实际操作的时候,你的样式表不可能放到根目录吧?肯定是放到CSS专门的目录里面。这个时候border-radius.htc就失效了。看DEMO

解决的办法我目前就知道一个,就是在样式表里,把behavior:url(border-radius.htc);相对路径改成绝对路径behavior:url(https://ximan.org/wp-content/uploads/2011/02/border-radius/css/border-radius.htc);,看DEMO

所以现在聊IT评论网里只用了一处border-radius.htc圆角,因为其他地方要么是2个圆角,要么是文本框,根本用不了。

希望有通用JavaScript实现圆角的朋友,给个demo网址我,我改用JavaScript算了,不想用图片。JavaScript不要大于50K的,那种我找到了,但是为了一个圆角,占用那么多空间,感觉不划算。

代码下载

评论已关闭

分类目录