首页 > 其他 > 详细

input输入框的border-radius属性在IE8下的完美兼容

时间:2015-09-25 21:38:45      阅读:452      评论:0      收藏:0      [点我收藏+]

     在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛。不错方法确实是这样,但是不要忘了border-radius是css3属性,IE8不兼容!!!那么问题来了,怎样在IE8下完美兼容呢?

网上有很多关于css3属性在IE8下兼容的方法,需要引入PIE.htc这个文件,相信很容易搜到并下载该文件,但是用上position:relative;behavoior:url(PIE.htc);后发现圆角是实现了,但会莫名的出现黑色边框就像图中这样

 技术分享  技术分享

                     正常情况                                                            IE8下有黑边

解决办法:

将input标签的border:none;外面的圆角边框用外层包裹的标签设置,为了不影响美观在配合margin或padding

最终的到的结果如下图所示,ff chome均达到完美兼容

技术分享

input输入框的border-radius属性在IE8下的完美兼容

原文:http://www.cnblogs.com/jesse131/p/4839338.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!