在工作中我们发现搜索框大部分都是有圆角的，为此作为经验不足的前端人员很容易就想到，给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. C++primer 阅读点滴记录（三）

    14章 操作符重载和转换 重载操作符是具有特殊名称的函数:保留字operator后接需要定义的操作符符号. 1.重载的操作符名: + – * / % ^ & | ~ ! , = <  & ...

  2. IL中的栈和闪电的Owin推荐

    最近几天有幸得到闪电大哥的指点,了解了EMIT和IL中的一些指令.虽然有高射炮打蚊子的说法,但是我相信“二八定律”,80%的功能可以用20%的技术解决,20%的功能只能用80%的技术解决.大哥的博客: ...

  3. 【转】Oracle中如何用一条SQL快速生成10万条测试数据

    转自http://blog.csdn.net/welken/article/details/4971887   做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入, ...

  4. Cygwin下软件安装 - apt-cyg

    安装了cygwin,但不能像centos上装yum,装东西很不方便.找了下可以用apt-cyg来安装软件. 1.下载apt-cyg $ wget raw.github.com/transcode-op ...

  5. randomize_va_space

    proc/sys/kernel/randomize_va_space用于控制Linux下 内存地址随机化机制(address space layout randomization),有以下三种情况 0 ...

  6. extjs 表格可复制

    在GridPanel的配置项中,加入这个配置就可以了: viewConfig:{ enableTextSelection:true }

  7. iis7应用程序池自动关闭问题解决

    解决: 应用程序池启动32位应用程序 设置托管管道为集成 (仍然有问题) 图片:123.png 访问网站之前 应用程序池是开启的 访问后 网页报503 service unavailable应用程序池 ...

  8. 单行bash、shell、perl命令

    主题:单行经典bash.shell.perl命令 作者:luomg 摘要: 会陆陆续的写自己工作中的常用有意思的命令,争取你能看完后就能搞定常见操作, 且尽量自少提供基本shell.perl的实现方式 ...

  9. HTML/CSS的学习过程一览

    HTML/CSS的学习过程一览 说明 调试工具使用的是Google Chrome浏览器,其余浏览器出现的问题,这锅我不背[傲娇脸 可以使用浏览器查看源代码 网页列表 HTML_CSS_1 HTML基本 ...

  10. 微软职位内部推荐-SDEII for Windows Phone Apps

    微软近期Open的职位: Job title: Software Design Engineer II Location: China, Beijing Division: Operations Sy ...