在工作中我们发现搜索框大部分都是有圆角的，为此作为经验不足的前端人员很容易就想到，给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. 解决vmware安装 win7 后 没有虚拟网卡驱动 不能上网的问题

    项目需要用到win7 32位系统,于是装个虚拟机,换了好几个系统资源,都是没有网卡驱动, XP 2003 都能上网唯独WIN7 不行,安装vmware tools也不管用,终于找到了这个东西.vmwa ...

  2. 老外写的在桌面添加快捷方式（DELPHI XE5 ANDROID）

    UsesAndroidapi.JNI.GraphicsContentViewText, FMX.Helpers.Android,Androidapi.JNI.JavaTypes, FMX.Platfo ...

  3. ASP.NET 5概观 （ASP.NET 5 Overview）

    http://www.asp.net/vnext/overview/aspnet-vnext/aspnet-5-overview ASP.NET 5概观(ASP.NET 5 Overview) 原作: ...

  4. [FAQ]String（字串相連）與StringBuilder的差別、原理與優缺點？

    原文位於 http://www.dotblogs.com.tw/mis2000lab/archive/2013/09/09/msdn_string_stringbuilder.aspx [FAQ]St ...

  5. JavaWeb之Servlet: ServletConfig 与 ServletContext

    ServletConfig对象 什么是ServletConfig对象 ServletConfig对象,叫Servlet配置对象.主要用于加载配置文件的初始化参数. 创建时机 ServletConfig ...

  6. 【FAQ】【JSP】HTTP Status 500 - Summary(问题排查时候应该仔细分析所有的错误打印说明)

    Question 1.HTTP Status 500 - Unable to compile class for JSP:'***' cannot be resolved to a type 原因分析 ...

  7. MIFARE系列5《存储结构》

    Mifare S50把1K字节的容量分为16个扇区(Sector0-Sector15),每个扇区包括4个数据块(Block0-Block3),我们也将16个扇区的64个块按绝对地址编号为0~63,每个 ...

  8. TAT 前端突击队 第四关 题目 腐蚀的画

    腐蚀的画 1.一个漂亮的画作在经过几千年岁月的洗礼下,部分地方已经被腐蚀了,像一个孤独的老人,满脸爬满了皱纹.2.但在一个晚上,老王突然发现,这些腐蚀的部分中,隐藏着岁月留下的密秘.请你帮助老王寻找这 ...

  9. Hadoop和大数据：60款顶级大数据开源工具

    一.Hadoop相关工具 1. Hadoop Apache的Hadoop项目已几乎与大数据划上了等号.它不断壮大起来,已成为一个完整的生态系统,众多开源工具面向高度扩展的分布式计算. 支持的操作系统: ...

  10. [转]开源中国的 IT 公司开源软件整理计划介绍

    [转]开源中国的 IT 公司开源软件整理计划介绍 http://www.oschina.net/news/61534/oschina-opensource-collection-plan-for-it ...