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

    原因:mysql server character设置问题 一.检查mysql server 安装目录下my.ini文件 找到如下设置 [mysql] default-character-set = ...

  2. USB设备---URB请求快

    1．urb 结构体USB 请求块(USB request block,urb)是USB 设备驱动中用来描述与USB 设备通信所用的基本载体和核心数据结构,非常类似于网络设备驱动中的sk_buff 结构 ...

  3. python 序列的方法

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在快速教程中,我们了解了最基本的序列(sequence).回忆一下,序列包含有定值 ...

  4. PHPStorm配置支持友好的Laravel代码自动提示

    在项目的composer.json "barryvdh/laravel-ide-helper":"dev-master" 项目config/app.php Ba ...

  5. JTable的DefaultModel方法getValueAt（a,row）

    行和列都是从0开始索引的,而且不包括netbeans生成的表格头,而是从数据开始,否则就会报错

  6. NOJ1019-计算二叉树的高度和结点数

    输入 二叉树的先序遍历序列,用#代表空树或空子树. 输出 共五行 前三行依次输出先序.中序和后序遍历序列, 第四行输出二叉树的高度, 第五行依次输出二叉树总结点数目.叶子结点数目.度为1的结点数目. ...

  7. 关于生成缩略图及水印图片时出现GDI+中发生一般性错误解决方法

    System.Drawing.Image OldImage = null; oldImage = System.Drawing.Image.FromFile(ImageUrl); 使用该方法读取图片时 ...

  8. bzoj 1054 移动玩具

    题目连接 http://www.lydsy.com/JudgeOnline/problem.php?id=1054 移动玩具 Description 在一个4*4的方框内摆放了若干个相同的玩具,某人想 ...

  9. randomize_va_space

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

  10. start apache2 failed in Ubuntu

    Invalid command 'WSGIReloadMechanism', perhaps misspelled or defined by a module not included in the ...