PIE解决CSS3中border-radius在IE浏览器中的兼容性

学习笔记 马富天 2016-05-07 10:31:29 313 0

【摘要】什么是CSS3 PIE,PIE是Processive Internet Explorer(Precessive英文单词是前进的意思),PIE的大概功能就是使得Internet Explorer 6-8的浏览器可以显示CSS中的几个功能。包括:border-radius、box-shadow、linear-gradient,今天主要介绍border-radius(即边框圆角)

border-radius能够实现带圆角的方框,但是在IE6、7和8中,是无法实现的,而在CSS中添加一段声明:behavior:url("PIE.htc"),就可以实现IE浏览器6-8下的边框圆角问题。

请看下面的效果图:

请输入图片名称

完整代码如下所示:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>PIE解决CSS3中border-radius在IE浏览器中的兼容性</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 			div{
  13. 					width:100px;
  14. 					margin:10px auto;
  15. 					line-height:30px;
  16. 					border:1px solid red;
  17. 					color:red;
  18. 					text-align:center;
  19. 					 /* Webkit 支持 */ 
  20. 					-webkit-border-radius:4px;
  21. 					/* Mozilla 支持 */
  22. 					-moz-border-radius:4px;
  23. 					behavior:url('/public/home/style/PIE/PIE.htc');					
  24. 					border-radius:4px;
  25. 					border-radius: 10px 8px 6px 4px;
  26. 			}
  27. 		</style>		
  28. 	</head>
  29. 	<body>
  30. 		<div>PIE解决border-radius在IE浏览器中的兼容性</div>
  31. 	</body>	
  32. </html>

PIE的下载地址:

CSS3 PIE的官方网站:

http://css3pie.com/download/

对您是否有帮助呢?有帮助请点个赞,支持一下,嘿嘿~

最后补充一句,就是IE9对CSS3的支持非常好,当然IE10的支持性更好。

版权归 马富天个人博客 所有

本文标题:《PIE解决CSS3中border-radius在IE浏览器中的兼容性》

本文链接地址:http://www.mafutian.com/100.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

5

4

上一篇《 CSS样式文字超出部分自动转成省略号 》 下一篇《 CSS3选择器浏览器的支持简介 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多