当前位置:Gxlcms > html代码 > input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:71人阅读

在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给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均达到完美兼容

人气教程排行