兼容IE8碰到的题目

基于bootstrap2的兼容IE8工程解说

须要的外部库:jquery1.8font-awesome4.2bootstrap2.3.2html5.jsrespond.jsie-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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞