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

    刚刚接触EF,总结了一些在实际工作中的心德经验,与大家分享一下. 一.Excression表达式树 表达式目录树在LINQ中用于表示分配给类型为Expression<TDelegate>的 ...

  2. linux积累

    在多文件中批量替换字符串grep -rl 'windows' ./ | xargs sed -i 's/windows/linux/g'

  3. Github上LeakCanary编译报错CreateProcess error=2的解决方法

    现象说明: 从github上拉下LeakCanary编译时报错 CreateProcess error=2, ϵͳÕҲ»µ½ָ¶ 原因分析: 该现象是由于Windows中Gradle调用命令未加cmd ...

  4. Oracle表结构转换SqlSERVER表结构 脚本

    在审计工作中,有时需要将Oracle的表结构修改后再SqlSERVER中创建表结构,然后将数据导入到SqlSERVER中,在修改表结构的过程中方法狠多.手工修改,最蠢的方法,或者用工具UE批量修改,还 ...

  5. Windows Phone Listbox虚拟化的问题

    最近在项目里面碰到最头疼的一个难题就是Listbox虚拟化的问题,查阅很多文档其实Listbox本身是支持虚拟化的,那么在什么情况下会破坏Listbox的虚拟化呢?目前我接触到的主要有两个原因:一.是 ...

  6. WebApi接口访问频率控制的实现

    关于限流的文章,博客园内还是有挺多的.本文做了一个基于Filter限流的例子,算是对WebApiThrottle使用的一个具体的实例. 实现方法: 1.使用Nuget,对WebAPI项目添加WebAp ...

  7. UISegmentedControl swift

    // // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...

  8. VC++编程中为程序加入启动画面功能

     如何为自己的程序加入启动画面 观察我们平常使用的软件,当我们双击软件的时候,会在主界面出现前,先行出现一个启动画面,由于前一阵子写了一个基于对话框的程序,亲自实验了下,今天就为大家简单的介绍下,在我 ...

  9. cocos中使用VS自动创建工程的方法

    为了省事,直接用VS编写了一小段代码,将cocos手动创建工程的命令改用system来执行,免去了手动输入命令的麻烦 其中: -d F:\\cocos2d-x-3.2-projects 是你要存放的工 ...

  10. npm ERR!无法安装任何包的解决办法

    npm ERR! Windows_NT 6.1.7601npm ERR! argv "E:\\node\\\\node.exe" "E:\\node\\node_modu ...