border-raduis 在IE8中的兼容性问题
border-raduis 是css3新增加的属性,我们运用起来也很方便,效果很好,但是在IE8以及之前的ie版本并不支持这个属性,怎么解决这个问题呢?
1、切成背景
这也是我经常用到的方法,虽然说有点麻烦,但是肯定没有问题。在碰到圆角时,我会去查看UI给我的psd图片,看看我是否可以直接将这个圆或圆角切图切下来,这样之后我都不用考虑写border-raduis这个属性了,直接将背景图片放上去就可以了,这种做法还有个好处就是不会碰到PNG的黑边现象。但是也有一个问题,就是这个图片的尺寸一点要切好,backgro-size属性在IE8中也是不支持的,不要想着再去调节图片的大小。同时还能兼容全部的浏览器,个人经常使用这个“笨”办法。
当然,这是一种避免使用border-raduis的方法,如果非要用border-raduis这个属性怎么办呢?
2、ie-css3.htc
这个是一个插件,个人感觉确实很好用,也用了一段时间。在网上可以查到很多个版本的使用方法,我来总结一下:
在写完border-raduis时,在后面加上behavior: url(js/ie-css3.htc); url里面的内容其实就是对这个文件的引入地址。我测试的时候发现只要直接引入就可以了,但是在实际的情况中 有时会出现它并没有起作用的情况,所以,我查阅了下其他人的经验,有可能有因素的影响:
① 定位,即position这个属性 ② z-index,保证这个标签的优先级要高于周围的其他的标签 ③ background-color 背景颜色
第一和第二个加上就可以解决问题了,至于背景颜色目前我没发现对其有什么影响,只是在使用这个属性的时候最好设置下背景颜色,因为如果没有设置的话,它会默认的加上黑色。
还要注意的是加上这个插件后,border-raduis 后面的参数不能是百分比。比如50%,系统会默认为50px。
还有就是我在测试的时候发现,不能直接给图片加上这个属性,要给图片一个父级,给其父级加上这个属性。
同时,这个插件还可以让IE8上面显示box-shadow 和 text-shadow这两个属性。但是需要注意的是设置的颜色在IE8中只能是黑色。
好了,暂时就这么多了,我不善于写文章,基本都是想到哪写到哪,如果大家有其他经验的话欢迎补充,我在今后的工作学习中发现其他问题也会进行补充的。
border-raduis 在IE8中的兼容性问题的更多相关文章
- JavaScript——数组的indexOf()方法在IE8中的兼容性问题
昨天在工作中遇到一个问题:数组的indexOf()方法在IE8中无效. 如以下代码在IE8中报错“对象不支持“indexOf”属性或方法”: var arr = [1,2,3]; var index ...
- CSS 在IE6, IE7 和IE8中的差别////////////////z
CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...
- CSS HACK区别IE6、IE7、IE8、Firefox兼容性
相信不少人,都特别清楚CSS HACK,而其中也是区别IE6.IE7.IE8.Firefox兼容性问题用的,CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样. ...
- IE8中li添加float属性,中英数字混合BUG
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在IE8中使用padding设置select控件文字垂直居中
在火狐.苹果.谷歌.欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图: 而在ie8中,select下拉表单的文字基本就是靠底部显示,如图: 那么,如何使得ie8下的select文字垂直 ...
- IE8中JSON.stringify方法对自动转换unicode字符的解决方案
IE8内置了JSON对象,用以处理JSON数据.与标准方法的不同,IE8的JSON.stringify会把utf-8字符转码: var str = "我是程序员" var json ...
- ie8中支持 password 的 placeholder
之前写过一篇 ie8中使用placeholder 的博客,但是,该文中的 placeholder 在 type="password" 时会出现问题,不能显示文字而是密码类型的点,所 ...
- 关于IE8中使用Jquery load方法无法正常加载页面
最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...
- angularjs 中ie兼容性的问题收集
今天在项目中做ie8的兼容的时候,发现angularjs中一些内容这样写有问题,那样写就没有问题了,自己记录一下内容: 如果遇到了ie8中使用$http.post请求不到数据的时候,以下的方法是获取不 ...
随机推荐
- Linked List Cycle && Linked List Cycle II
Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...
- IP头、TCP头、UDP头详解以及定义
一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/typedef struct _MAC_FRAME_HEADER{ char m_cDstMacAddress[6]; //目的m ...
- 转换器4:手写PHP转Python编译器,语法解析部分
写完词法部分,又有很多杂事,周末终于有空来实现伟大的语法解析部分了. 撸完代码之后发现,程序太短了,不算上状态机,才186行(含注释),关键代码不到100行.运行调试过后,发现还行.居然可以解析One ...
- Web API框架学习——路由(一)
HttpConfiguration(ASP.NET Web API管道的配置是通过HttpConfiguration来完成) : 包括路由注册在内的对整个ASP.NET Web API管道的配置是通过 ...
- 使用shape来定义控件的一些显示属性
Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结 先看下面的代码: <shape> <!-- 实心 -- ...
- JS Math.round()方法原理
请先测试代码: <!doctype html> <html lang="en"> <head> <meta charset="U ...
- EF批量插入(转)
原作者地址http://blog.csdn.net/zlts000/article/details/46385773 之前做项目的时候,做出来的系统的性能不太好,在框架中使用了EntityFramew ...
- JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置
---恢复内容开始--- 圆角矩形 border-radius:50% 40% 30% 33px: 像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...
- Android 中基于 Binder的进程间通信
摘要:对 Binder 工作机制进行了分析. 首先简述 Android 中 Binder 机制与传统的 Linux 进程间的通信比较,接着对基于 Binder 进程间通信的过程分析 最后结合开发实例 ...
- MyBatis快速入门(1):搭建环境和单表映射
一.MyBatis简介 一说起对象关系映射框架,大家第一时间想到的肯定是Hibernate.Hibernate作为一个著名的框架,功能十分强大.我们只需要配置好实体类和数据表之间的关系,Hibe ...