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

最新推荐文章于 2021-08-03 23:24:32 发布

邱先生~

最新推荐文章于 2021-08-03 23:24:32 发布

阅读量588

点赞数

分类专栏：常见问题文章标签： border-radius box-shadow background-size rrgba

本文链接：https://blog.csdn.net/weixin_43932245/article/details/102681632

版权

常见问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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下的效果如下：
在这里插入图片描述
问题：
一、只能同时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值。对应关系如下：
在这里插入图片描述

第二部分是后面的六位。这个是六进制的颜色值。要跟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">
  <!--[if lt IE 9]>    //判断当前浏览器的版本是否小于IE 9
  <script src="./common/respond.min.js"></script>
	<!--[endif]-->
</head>

优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用
缺点：仅支持media Queries的min-width和max-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]-->

邱先生~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录