解决IE8及以下版本css3圆角不能显示的问题
作者:阿魏空荡荡 | 来源:互联网 | 2023-05-18 13:08
以前实现圆角都是用图片,这样一来不仅增加了页面加载时间,如果要自适应宽度和高度就要再用上滑动门技术,这样有时候要加上很多多余的和无语义的标签,就算为了html代码的简洁然后用js来实现,也要很多多余的
以前实现圆角都是用图片,这样一来不仅增加了页面加载时间,如果要自适应宽度和高度就要再用上滑动门技术,这样有时候要加上很多多余的和无语义的标签,就算为了html代码的简洁然后用js来实现,也要很多多余的代码,很麻烦。而且圆角的背景、颜色也很难改变,很多时候都要改变图片。
如果用css3就很容易了,只要在css中加上几行代码,如下所示:
.site-subNav {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
也可将border:1px solid #000;换成background-color;
这种方法在各主流浏览器都能完美支持,但在IE8及以下版本就不能用了。
解决的办法很简单,在http://css3pie.com/页面下载一个PIE.htc的文件,加载到根目录下,然后在css中加上一句behavior:url(../js/PIE.htc);如下:
.site-subNav {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior:url(../js/PIE.htc);
}
其中文件的路径是相对html的,很奇怪,所以在服务器上最好用绝对路径。
对于有些父元素已经设置了position属性的元素,会出现无法显示的情况,此时可以给元素加上position:relative;如下:
.site-subNav {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
position:relative;
behavior:url(../js/PIE.htc);
}
也可以将父元素的z-index值设大一些。
这样一来其实也挺麻烦的,又不好给每个圆角的元素都加上position:relative,毕竟有可能会出现副作用,如果是在后期才来解决IE问题,此时css部分已经基本完成,此时给元素加上position也可能会影响到其他元素,所以最好在有需要的时候再加。
我在项目中就遇到了这个问题,到后期才来处理IE问题,不仅要给所有圆角元素加上behavior:url(../js/PIE.htc);增加了很多冗余代码;还要找出父元素已经设置了position属性的元素,很明显不可能全部找出来,只能遇到的时候再加上。所以如果要用圆角,最好在项目刚开始就处理兼容问题,可以设置一个类,如下:
.border_radius {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior:url(../js/PIE.htc);
}
然后给所有需要圆角的元素加上这个类,当然,这样也可能很烦,因为有时候很多相同的元素都需要圆角,比如某个ul的所有li元素,如果给每个li都添加类就太麻烦了,所以也可以将页面中需要用圆角的元素的选择器集中起来设置,如下所示:
.site-subNav li, a {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior:url(../js/PIE.htc);
}
在项目中还遇到了一个问题,某元素要鼠标放上去出现背景圆角效果,且要求有淡入淡出的效果,因为该元素的文字长度不定,为了将圆角元素包含文字元素实现自适应宽度,因此我使用了jQuery中的wrap()方法和unwrap()方法。但在IE8及以下版本的显示却很奇怪,元素会先出现方框的背景,再变成圆角背景。后来发现是wrap()方法和unwrap()方法的问题,不知道为什么。尽管后来换了很多方法,比如手动添加圆角元素,或是再clone一个有背景的元素等方法,都不同程度上出现问题,最后我们的解决办法是牺牲IE8及以下的浏览体验,改淡入淡出为直接出现,这样就只需要加上一个类就可以了,在其他浏览器仍然使用wrap()方法和unwrap()方法,因此需要加上浏览器判断,虽然使用浏览器判断不合适,但也是不得已的情况下才用,已是能找到的最好的解决办法了,偶尔用一下还是可以的啦~~~
PIE.htc文件其实就是js代码,使用的时候有时候很奇怪,加载了一次后貌似会一直在,发现这个问题是因为偶然的一个机会behavior:url(../js/PIE.htc);解决了一个IE7下的bug。在我的项目中,我给em元素的包含元素设置了height和line-height,line-height可以使em元素垂直居中。但在IE7下em元素却继承了包含元素的height,表现的像块级元素。为了不让em继承height,我想到了强制设置em的height,但这样一来em就不能垂直居中了,设置margin-top也不行,因为毕竟不是真的块级元素。可是奇迹发生了,因为我用上面的方法给em元素加了放上去显示圆角背景的效果,结果刚加载的时候em的margin-top是无效的,当放上鼠标后居然生效了,而且移开后就算背景消失但是maigin-top还是一直生效,最后发现是behavior:url(../js/PIE.htc);起了作用。而且就算移开鼠标后该类被移除,margin-top仍然生效。可能是PIE.htc文件里面代码的原因,暂时还不知道是为什么哈~~~
当然PIE.htc不只用来解决圆角问题,还能解决阴影显示、背景渐变等问题。
以上纯属个人经验,可能有的地方说得不够严谨,望多多指教哈~~~~
推荐阅读
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
[详细]
蜡笔小新 2023-12-11 12:06:41
随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
[详细]
蜡笔小新 2023-12-13 12:08:09
本文介绍了GregorianCalendar类的基本信息,包括它是Calendar的子类,提供了世界上大多数国家使用的标准日历系统。默认情况下,它对应格里高利日历创立时的日期,但可以通过调用setGregorianChange()方法来更改起始日期。同时,文中还提到了GregorianCalendar类为每个日历字段使用的默认值。 ...
[详细]
蜡笔小新 2023-12-11 13:35:26
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ...
[详细]
蜡笔小新 2023-12-09 10:26:04
2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ...
[详细]
蜡笔小新 2023-10-17 19:54:54
本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ...
[详细]
蜡笔小新 2023-10-17 13:38:49
来源:http:zxlovenet.cnblogs.com本文主要通过彩色图象灰度化来介绍C#处理数字图像的3种方法,Bitmap类、BitmapData类和Graphics类是C ...
[详细]
蜡笔小新 2023-10-16 14:51:10
本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ...
[详细]
蜡笔小新 2023-09-25 13:50:50
http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ...
[详细]
蜡笔小新 2023-09-17 13:26:50
小编给大家分享一下CSS3如何实现loading预加载动画特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章 ...
[详细]
蜡笔小新 2023-09-16 12:05:33