以下兼容技术我只测试了IE8+

Media Query 媒体查询

 <script src="respond.min.js"></script>

respond.min.js脚本下载

CSS3圆角

把下载的PIE.htc放到项目文件夹中然后在用到圆角的CSS中引入PIE.htc

behavior: url(../Images/PIE.htc);}//圆角兼容

PIE.htc脚本下载

使用说明

CSS3高级选择器

first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账

首先,您需要下载DOMAssistant脚本和ie-css3.js脚本并将他们包含进head标签中.====只要百度下ie-css3.js然后下载里面就有这两文件了哦

<!--[if lt IE 9]>

         <script src="IE8lower/ie-css3/DOMAssistantCompressed-2.7.4.js"></script>

         <script src="IE8lower/ie-css3/ie-css3.js"></script>

    <![endif]-->

透明度opacity

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)  IE8-

opacity: 0; 主流浏览器

CSS3 transform旋转

transform:rotate(180deg);

-ms-transform:rotate(180deg);

-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

 -o-transform:rotate(180deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 兼容ie8

其他旋转角度

.flipx {

     -moz-transform:scaleX(-1);

     -webkit-transform:scaleX(-1);

     -o-transform:scaleX(-1);

     transform:scaleX(-1);

     filter:FlipH();

}

.flipy {

     -moz-transform:scaleY(-1);

     -webkit-transform:scaleY(-1);

     -o-transform:scaleY(-1);

     transform:scaleY(-1);

     filter:FlipV();

 }

.rotate90 {

    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -webkit-transform: rotate(90deg);

    transform: rotate(90deg);

 }

/*顺时针旋转180度*/

 .rotate180 {

    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

    -moz-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

 }

.rotate270 {

    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    -moz-transform: rotate(270deg);

    -o-transform: rotate(270deg);

    -webkit-transform: rotate(270deg);

    transform: rotate(270deg);

 }

HTML5标签

<script src="html5shiv.js"></script>

html5shiv.js脚本下载

max-width

还有一个在IE8中经常遇到的问题就是max-width，网页中图片的尺寸可能比较宽，我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度，但是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些，所以这个问题应该不归属为IE兼容性问题，不过我还是提一下吧。分享两个我遇到的场景：

（1）td中的max-width

如果针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed，对此属性的具体解释见W3School。

（2）嵌套标签中的max-width

如下的HTML结构：

<div class="work-item">

    <a href="#" class="work-link">

        <img src="sample.jpg" class="work-image img-responsive">

    </a>

</div>

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。

placeholder

<script  src="jquery-placeholder.js"></script>

<script>

$(function() {

 $('input, textarea').placeholder();

});

</script>

placeholder脚本兼容下载

background-size: cover

如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了。

background-size:cover;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/img001.jpg',sizingMethod='scale');

还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

box-sizing

这个我试过了感觉不凑效，大家用过bootstrap3的都知道它里面全是CSS3，我试过为它做IE6/7的兼容，其他的兼容问题都好办，最不好办的就是box-sizing这个属性的兼容。

box-sizing 兼容脚本下载

渐变

ie6测试通过

filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE67*/

-ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE8*/

background:-o-linear-gradient(top, rgba(225,0,25, 1),rgba(0, 96, 27, 1));

绿色位置该为自己需要的颜色可以，注意颜色值格式，滤镜的是“#”，其他用rgb

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

html,body{margin:0;height:100%;}

.gradient{

	height:100%;

    filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE67*/

    -ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE8*/

    background:#006600; /* 一些不支持背景渐变的浏览器 */

	background:-ms-linear-gradient(top,rgba(225,0,25, 1),rgba(0, 96, 27, 1));

    background:-moz-linear-gradient(top,rgba(225,0,25,1),rgba(0, 96, 27, 1));/*Firefox*/

    background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(225,0,25, 1)), to(rgba(0, 96, 27, 1)));/*chrome Safari*/

    background:-o-linear-gradient(top, rgba(225,0,25, 1),rgba(0, 96, 27, 1));/*Opera11*/

}

</style>

</head>

<body>

<div class="gradient"></div>

</body>

</html>

background: -ms-linear-gradient(top,#c00,#c00); background: -moz-linear-gradient(top,#c00,#c00); background: -webkit-gradient(linear,0 0,0 100%,from(#c00),to(#c00));//主流

 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#c00", endColorstr="#c00")"; //ie

HTML5/CSS3hack的更多相关文章

使用HTML5开发Kinect体感游戏
一.简介我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

随机推荐

浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
C#中的泛型【转】
C#中的泛型泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确 ...
.dmp文件导入个别表
imp bizinfo_qy/bizinfo_qy@orcl161 file=D:\收付费核算系统\分线\bizinfo_qy.dmp log=bizinfo_qy.log TABLES=(al_i ...
[转]Android SHA1与Package获取方式
转自高德地图LBS Android SHA1与Package获取方式获取应用包名打开Android 应用工程的 AndroidManifest.xml配置文件,package 属性所对应的内容为应 ...
objective c实现配置文件+反射
1. 先写plist配置文件 plist写到resouce里面去通过NSBundle把数据取plist读出来 2. 通过NSClassFromString创建类 NSClassFromString ...
分析app和wap手机网站的不同
随着手机3G.4G时代的到来,手机功能的越来越强大,手机App的市场是越来越火爆,时代在更新随之而来的事物也在更新,不能更上时代的步伐是落后的表现,所以不仅仅是手机APP在完善,手机网站WAP也在不断 ...
php随机数、时间、字符串函数，正则，数组函数
<?php//1.随机数和时间//echo rand(); //随机数生成器//echo rand(0,10); //生成某个范围内的随机数 //echo time(); //取当前时间戳//e ...
PHP Apache服务配置
第一步:在C:\Windows\System32\drivers\etc中找到hosts配置服务 127.0.0.1 localhost 127.0.0.1 www.psq.com 保存即可第二步: ...
jsp中用EL读取了数据库里面的时间,怎么设置格式显示的格式
首先导入标签 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> < ...
Linux系统巡检常用命令
# uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...

HTML5/CSS3hack