基于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; //注意空格
目前引入的兼容存在的问题:
display:inline-block;无效改用display:inline
input等表单项样式重写需border:none;再设定需求的border样式然后加上
behavior:url(ie-css3.htc) 其中ie-css3.htc为绝对路径。
ie-css3.htc详解
.htc是个脚本文件,本身和js是同一类型。IE只承认的文件格式是.htc,用来描述web行为,允许程序员把自定义功能连接到现有的元素和控件,而不是通过下载二进制文件(例如ActiveX控件)来完成这个功能。
局限性:
当前元素一定要有定位属性(position:relative或position:absolute)
z-index值一定要比周围元素高
支持的内容:
border-radius 四个角设置圆角属性(只设置一个角无效)
box-shadow 阴影的参数box-shadow: 5px 3px 5px #000;(不支持除了#000之外的颜色)
text-shadow IE下的表现与Firefox/Safari/Chrome有一点点的差异
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。