码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器的一些兼容问题

时间:2015-01-24 18:37:45      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角。

本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准。

让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角。

在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器。

具体CSS代码

	/*支持圆角的写法*/
  width :100px;
  height :50px;
  border :2px solid #cococo;
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  position:relative;
  z-index:2; 
  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于‘box‘类 */
}

  

  

CSS中使用behavior引入“iecss3.htc”插件文件即可。DIVCSS5提示注意,要让IE6-IE8支持,需要将“behavior: url(ie-css3.htc)”引人CSS代码直接放到HTML文件源代码内才能生效。

让IE6-IE8支持CSS3圆角必备条件:
1、behavior: url(iecss3.htc)必须直接HTML中引人;
2、position:relative; z-index:2; 必须同时使用position和z-index两个CSS属性。

 

 

IE6/7/8这三个IE浏览器版本支持CSS3的阴影的写法;

.box {
	/*box块区的阴影的写法*/
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于‘box‘类 */
}

  >>

.box {
	/*text字体的阴影的写法*/
    -moz-text-shadow: 5px 5px 20px #000;
    -webkit-text-shadow: 5px 5px 20px #000;
    text-shadow: 5px 5px 20px #000;
}

  因为IE6/7/8,对css3支持度的因素,以上只是自己平时做的一些方法,不对之处请各位多多包含,大家可以相互多多交流。

 

浏览器的一些兼容问题

标签:

原文地址:http://www.cnblogs.com/Angelinvestment/p/4246136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!