在工作中我们发现搜索框大部分都是有圆角的，为此作为经验不足的前端人员很容易就想到，给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. asp.net 发布后用IP访问正常，用机器名访问布局出错

    问题如题[发布后IP访问正常,用机器名访问布局出现问题] 出现此问题的原因:IE文档模型发生变化,比如ip访问时IE文档模型为:IE10,换用机器名访问时,文档模型变为IE7 解决方法:设置默认IE版 ...

  2. Eclipse 4.6 Neon, could not create the java virtual machine

    下了eclipse 4.6,打开报错:could not create the java virtual machine. a fatal exception has occurred. 命令行用 e ...

  3. sublimeText OmniMarkupPreviewer 404

    这个错误也是出现的莫名奇妙. "Error: 404 Not Found Sorry, the requested URL 'http://127.0.0.1:51004/view/29' ...

  4. python Django 学习笔记（五）—— Django admin自动管理界面

    1,激活管理界面 修改settings.py MIDDLEWARE_CLASSES = ( 'django.middleware.common.CommonMiddleware', 'django.c ...

  5. [转]从普通DLL中导出C++类 – dllexport和dllimport的使用方法（中英对照、附注解）

      这几天写几个小程序练手,在准备将一个类导出时,发现还真不知道如果不用MFC的扩展DLL,是怎么导出的.但我知道dllexport可以导出函数和变量,而且MFC扩展DLL就算是使用了MFC的功能,但 ...

  6. [原创]EnterpriseDB测试key申请方法

    各位有对EnterpriseDB感兴趣的朋友,可以通过邮件方式申请测试key: 发送邮件至:zws@focus-soft.com,官方收到邮件后会有专人与您联系,一般情况都会很快得到一个测试key. ...

  7. MongoDB 数据类型

    MongoDB支持许多数据类型的列表下面给出: String : 这是最常用的数据类型来存储数据.在MongoDB中的字符串必须是有效的UTF-8. Integer : 这种类型是用来存储一个数值.整 ...

  8. .Net开源数据库设计工具Mr.E For Linq (EF 6.1) 教程（三）更新已发布的数据库

    项目发布到服务器后,如果在后期,数据库的结构发生变更,如何更新到服务器呢? 首先,右键点击数据库,导出结构脚本文件 把脚本文件和 Mr.E.rar拷贝到服务器,在服务器解压Mr.E,运行其中的“更新数 ...

  9. C#全局作用符::

    比如说你在全局定义了一个变量str,然后在函数里面又定义了这个str名字的变量的,这个时候你要是在函数里面直接写str,那么就是访问的函数内部的变量的.无法访问外部变量的.这是正常的现象的.但是如果你 ...

  10. Xcode 7遇到 App Transport Security has blocked a cleartext HTTP 错误

    今天用Xcode 7 创建新项目用到 URL 发送请求时,报下面的错: “App Transport Security has blocked a cleartext HTTP (http://) r ...