兼容性总结

火狐31.0以下兼容注意事项

1.css不兼容

background-position: 0 -30px;//兼容
background-position-y: -30px;//不兼容

1.2 关于使用PIE.htc 进行IE兼容CSS3圆角CSS3等IE9+会兼容,IE8以下不兼容CSS3,使用PIE

圆角CSS3等IE9+会兼容,IE8以下不兼容CSS3,使用PIE,PIE兼容所有IE浏览器

一、首先需要下载一个文件PIE.htc

链接 

提取码:32in

二、使用例子

1、引入文件。

注意:

            最好是直接使用 URL 的绝对路径;

            注意css文件相对html位置或者绝对路径,非css位置;

            一般直接使用*引入在IE8以下让每个元素具有;

2、在css元素中加上  behavior:url(pie.htc);

3、可以愉快的写css hack啦 ,这时需要的圆角平移等等各种css3属性在ie8上都可以展示出来

.box{
	  width:250px;
	  height:250px;
	  background-color:#34538b;
	  -moz-border-radius:10px;      
	  -webkit-border-radius:10px;
      /* behavior: url(plugins/lib/PIE-1.0.0/PIE.htc); */
	  /* 或者绝对路径 */
	  behavior: url(file:///D://plugins/lib/PIE-1.0.0/PIE.htc?v=1576805621479);
      border-radius:10px;//圆角
      border-image: url(../../../images/star.png) 30 30 round;//边框背景(IE不生效)
     -pie-background: rgba(187, 158, 240, 0.3);//rgba
     -pie-background: linear-gradient(148deg, #00e8bb 0, #eab7cf 43%, #9aece2 100%);//渐变
}

1.3不引入PIE得一种方式解决兼容

  线性渐变(linear-gradient)

IE系列 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 
参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平 

Firefox 
background: -moz-linear-gradient(top, #FF0000, #F9F900); 
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变 

Opera 
background: -o-linear-gradient(top,#FF0000, #F9F900); 
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变 

webkit,如Chrome、Safari等 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 
参数:linear线性, x1 x2, x3 x4 x1与x3相同时垂直,x2与x4相同时水平 from起始颜色 to结束颜色

1.4 rgba,兼容所有浏览器IE专属滤镜 filter:Alpha(opacity=x)

.demo{
  padding: 25px;
  background: #000000;
  filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
  position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
  *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
.demo p{
    color: #FFFFFF;
    position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值,保证字体颜色不透明 */
}

2.js

检查jquery版本

假如项目中有用到jquery,则首先检查jquery版本是否在2.0以上.2.0以上版本的jquery不支持ie8.

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章