ie8下兼容border-radius,box-shadow,background-size,rgba,媒体查询,html5标签的各种方式

ie8下很多css都存在兼容性问题,这里把常见的兼容性问题整理一下,方便日后需要的查找。

border-radius和box-shadow兼容ie8
background-size兼容ie8
rgba兼容ie8
媒体查询兼容ie8
html5标签兼容ie8

border-radius和box-shadow兼容ie8

这里我们用到的是ie-css3.htc,来处理一些样式兼容(border-radius,box-shadow,text-shadow

<p class="radius_class">
    border-radius兼容ie8
  p>
  <p class="shadow_class">
      box-shadow兼容ie8
    p>
 .radius_class{
      display: block;
      width: 200px;
      background: #ccc;
      padding: 10px 20px;
      margin: 10px;
      -moz-border-radius:30px; /* Firefox */
      -ms-border-radius:30px;
      -o-border-radius:30px;
      -webkit-border-radius:30px;/* Safari and Chrome */
      border-radius: 30px;
      text-align: center;
      /*解决IE*/
      behavior: url('./ie-css3.htc');
    }
    .shadow_class{
      display: block;
      width: 200px;
      background: #ccc;
      -moz-box-shadow: 0px 10px 5px #000;    /* Firefox */
      -webkit-box-shadow: 0px 10px 5px #000; /* Safari and Chrome */
      box-shadow: 0px 10px 5px #000;         /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
      behavior: url('./ie-css3.htc');
      
    }

ie8下的效果如下:
ie8下兼容border-radius,box-shadow,background-size,rgba,媒体查询,html5标签的各种方式_第1张图片
问题:
一、只能同时4角圆角,不能单独设置;

二、div上可以正常使用,测试text文本框,会出现异常;

三、CSS文件要和页面在同一目录下,否则无效(放在与index.html同级的根目录下)

四、当前元素一定要有定位属性,像是position:relative或是position:absolute属性

五、z-index值一定要比周围元素的要高

六、出现背景变黑的情况,给元素加上background-color:#fffff


background-size兼容ie8

有时候图片的大小与自己设置的宽高不一样,需要用到background-size来让图片满足盒子的大小,但在ie8下background-size不兼容,这时我们可以使用滤镜来处理下:

 .mybg{
	width: 100px;
	height: 100px;
	background-image: url('./img/banner.png');
	background-repeat: no-repeat;
	background-position: left center; 
	background-size: 100% 100%;
	/* background-size:cover; */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./img/banner.png',sizingMethod='scale'); 
}

这样可以让IE也实现background-size:100%100%的效果。
注意! filter路径是相对于页面,不是css的相对目录

filter参数说明:
src=“图片路径”,可以是相对,也可以是绝对;

sizingMethod:“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
  • crop:剪切图片以适应对象尺寸。
  • image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
  • scale:缩放图片以适应对象的尺寸边界。

ps:如果设置了background-attachment:fixed;background-size属性会失效。

目前找到的是让图片cover兼容,让图片能和size:50%,30%;这种形式的兼容还没有找到。如果大家有找到的,希望留言告知一下,谢谢!


rgba兼容ie8

rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。IE9及以上的浏览器是可以通过rgba设置透明度的。但是在ie8中是不支持的rgba的,ie8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)

所以在ie8中设置透明就要用滤镜filter了

.rgba_class{
      width: 100px;
      height: 100px;
      background: rgba(0,0,0,.5);  
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);  
    }

filter中的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

filter中参数的颜色值是由两个部分组成的。

第一部是#号后面的7F(头两位)。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
ie8下兼容border-radius,box-shadow,background-size,rgba,媒体查询,html5标签的各种方式_第2张图片

第二部分是后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(0,0,0)对应#000000;都是黑色。


media Queries兼容ie8

这里我们需要引入respond.min.js,在css之后引入,最好写在head里面在link后引入respond.min.js

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页title>
  <link rel="stylesheet" href="./styles/css/common.css">
  <link rel="stylesheet" href="./styles/css/index.css">
  
head>
  • 优点:压缩后仅1k,不跨域时性能ok,只需引入respond.js通用易用
  • 缺点:仅支持media Queriesmin-widthmax-width(用于响应式够用);支持跨域,虽然配置有点麻烦,实现跨域代价高而且有闪屏体验欠佳。

ps:静态页面的时候ie8下会报错,在动态服务下页面没问题


html5标签兼容ie8

用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

你可能感兴趣的:(常见问题,border-radius,box-shadow,background-size,rrgba)