兼容IE8遇到的问题

2024年2月22日 188次阅读 来源: YoJesse

基于bootstrap2的兼容IE8工程讲解

需要的外部库：jquery1.8、font-awesome4.2、bootstrap2.3.2、html5.js、respond.js、ie-css3.htc

jquery版本在1.9以上不支持ie8，html5.js是声明页面采用HTML5标准，respond.js让页面支持媒体查询，ie-css3.htc为css3中某些属性的兼容。

注意事项：

页面头部


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> //页面宽度设定为容器宽度 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <meta charset="utf-8">

css规范

background属性

background:#f7fbff url(background.png) 0 0 no-repeat; //注意空格

目前引入的兼容存在的问题：

  1. display:inline-block;无效改用display:inline

  2. input等表单项样式重写需border:none;再设定需求的border样式然后加上
    behavior:url(ie-css3.htc) 其中ie-css3.htc为绝对路径。

ie-css3.htc详解

.htc是个脚本文件，本身和js是同一类型。IE只承认的文件格式是.htc，用来描述web行为，允许程序员把自定义功能连接到现有的元素和控件，而不是通过下载二进制文件（例如ActiveX控件）来完成这个功能。

局限性：

  1. 当前元素一定要有定位属性（position:relative或position:absolute）

  2. z-index值一定要比周围元素高

支持的内容：

  1. border-radius 四个角设置圆角属性（只设置一个角无效）

  2. box-shadow 阴影的参数box-shadow: 5px 3px 5px #000;（不支持除了#000之外的颜色）

  3. text-shadow IE下的表现与Firefox/Safari/Chrome有一点点的差异

    原文作者：YoJesse
    原文地址: https://segmentfault.com/a/1190000008095671
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞