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

  1. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  2. 关于IE8下media query兼容的解决方案探讨

    在国内IE8至少还占有20%的市场份额,所以在做网站时,必须得为这部分用户特殊兼容考虑. 一方面IE8上面很多css3定义的标签不能使用,另外一方面javascript的addEventListene ...

  3. 微信小程序优化：实现picker组件中input输入框禁止输入，而只能通过picker组件选择日期

    原来的代码如下: <view class="right">     <picker mode="date" value="{{mat ...

  4. 关于inline-block在IE8下无效的解决方法

    <style> .divClass{ width:500px; border:1px solid #ccc; } /*IE8下可以不用加(*zoom:1;*display:inline;需 ...

  5. view视图文件中的input等输入框必须含有name属性，不然控制器里的动作formCollection是没有值的

    view视图文件中的input等输入框必须含有name属性,不然控制器里的动作formCollection是没有值的,就是没有name属性,后台获取不到值

  6. 认识input输入框的placeholder属性

    我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...

  7. 今天碰到一个问题，怎么限制用户在固定宽度的input输入框里输入的长度，由此涉猎到了maxlength属性和size属性以及它们的区别。

    最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...

  8. angular4 form 表单中 input输入框的disabled属性

    直接加[disabled]="isDisabled"属性的话,出现报错 根据提示,做如下修改 private isEdit: boolean = true; private isD ...

  9. input输入框的readonly属性-----http://www.w3school.com.cn/tags/tag_input.asp

    http://www.w3school.com.cn/tags/tag_input.asp input输入框的readonly属性 查询方法: 1.先找官方的文档,api 2.官方的有看不懂的再百度相 ...

随机推荐

  1. setting菜单界面的形成--未优化

    代码: first_preference.xml: <?xml version="1.0" encoding="utf-8"?> <Prefe ...

  2. CentOS7.0安装与配置Tomcat-7

    解决权限不够 #chmod a+x filename 安装说明 安装环境:CentOS-7.0.1406安装方式:源码安装 软件:apache-tomcat-7.0.29.tar.gz 下载地址:ht ...

  3. DOS下无法调出中文输入法-Solved

    From:http://www.cnblogs.com/killerlegend/p/3750542.html Author:KillerLegend Date:2014.5.24 DOS下无法打开中 ...

  4. PHP5中常用的魔术函数有哪些，举例说明各自的用法。

    所谓魔术函数,是指不同时刻为了完成特定的功能,而自动调用的方法. __sleep       在serialize()序列化对象之前会调用这个函数__wakeup    在unserialize()解 ...

  5. 【转】Messagedlg

      ) = mrYes then Close; MessageDlg用法 对话框类型:mtwarning——含有感叹号的警告对话框mterror——含有红色叉符号的错误对话框mtinformation ...

  6. paypal api 相关资料

    https://developer.paypal.com/ https://developer.paypal.com/docs/classic/api/merchant/GetBalance_API_ ...

  7. ED/EP系列3《基本指令》

    Ø --APPLICATIONBLOCK(应用锁定): Ø --APPLICATION UNBLOCK(应用解锁): Ø --CARDBLOCK(卡片锁定): Ø --EXTERNAL AUTHENT ...

  8. MAC 重置MySQL root 密码

    重置MySQL root 密码:当忘记密码,或者想要强行重置 MySQL 密码的时候,可以像下面这样: 1.停止 MySQL 服务 sudo /usr/local/mysql/support-file ...

  9. mybatis数据库基本配置包括数据源事物类型等

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...

  10. Linux下mysql自动备份

    #!/bin/bashDATE=`date +%Y-%m-%d-%H:%M -d -3minute`USER=rootPASSWORD=mayboBACKUP_DIR='/home/mysqlbak/ ...