在工作中我们发现搜索框大部分都是有圆角的，为此作为经验不足的前端人员很容易就想到，给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. 画画板--第三方开源--DrawableView

    Android上的第三方开源DrawableView支持手写,类似于写字板.DrawableView支持改变画笔颜色,画笔线条粗细,画布的手势缩放和拖曳显示部分区域.并最终支持将手绘的图保存到本地.在 ...

  2. FaceBook微光闪烁---第三方开源--shimmer-android

    Android上的微光闪烁shimmer效果,实现的手段不少,其中比较好的是facebook做的开源库:shimmer-android,其在github上的项目主页是:https://github.c ...

  3. Python可以做什么？

    Python是一个优秀的程序语言,PYthon的应用角色几乎是无限的,你可以在任何场合应用Python. 1 系统编程 Python提供对系统管理的内部接口,可以搜索文件和目录,可以运行其他程序 Py ...

  4. programming ruby

    ri #rdoc reader attr_reader attr_writer @@xx 类变量都是私有的 def 类名.xx end 类方法 [1,3,5,7].inject(0){|sum,e| ...

  5. IE8中JSON.stringify方法对自动转换unicode字符的解决方案

    IE8内置了JSON对象,用以处理JSON数据.与标准方法的不同,IE8的JSON.stringify会把utf-8字符转码: var str = "我是程序员" var json ...

  6. JavaWeb之Servlet：Cookie 和 Session

    会话 现实生活中我们会用手机跟对方对话,拿起手机,拨号,然后对面接听,跟着互相通话,最后会话结束. 这个过程也可以用我们的B/S模式来描述: 打开浏览器—>输入地址->发出请求->服 ...

  7. 说说用C语言求根的那些事儿

    C语言--求根:计算机只识别0和1,那么问题来了,作为计算工具如何解决数学问题?其实,计算机是死东西,都是程序员用计算机的的思维去加数学公式计算数学题的.听起来好高端的样子,其实啊,也就那么回事儿, ...

  8. HDU1009

    题意:有n个房子,每个房子里都有老鼠喜欢吃的咖啡豆J[i],但是每个房子都有猫看守,老鼠现在手上有M的猫粮.可以用猫粮换咖啡豆,每只猫都有猫粮的要求F[i].老鼠得到的咖啡豆是J[i]*a%     ...

  9. hdu 1305 Immediate Decodability

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1305 字典树裸题,如下: #include<algorithm> #include< ...

  10. 关于android WebViewClient的方法解释

    1.public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true ...