标签：html5css3hack   html5css3浏览器兼容   

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

Media Query 媒体查询

<span style="font-size:18px;"> <script src="respond.min.js"></script></span>

CSS3圆角

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

PIE.htc脚本下载

CSS3高级选择器

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

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

<span style="font-size:18px;">   <!--[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]--></span>

透明度opacity

<span style="font-size:18px;">filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)  IE8-
opacity: 0; 主流浏览器</span>

CSS3 transform旋转

<span style="font-size:18px;">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</span>

<span style="font-size:18px;"> <script src="html5shiv.js"></script></span>

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>

placeholder

<span style="font-size:18px;"><script  src="jquery-placeholder.js"></script>
<script>
$(function() {
 $('input, textarea').placeholder();
});
</script></span>

</pre><a target=_blank href="https://github.com/mathiasbynens/jquery-placeholder" target="_blank">jquery-placeholder.js</a>脚本下载</p><h1><span style="font-size:18px;">background-size: cover</span></h1><p><span style="font-size:18px;">如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：</span></p><p><span style="font-size:18px;"></span><pre name="code" class="html">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

box-sizing

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

box-sizing 兼容脚本下载

HTML5/CSS3hack

标签：html5css3hack   html5css3浏览器兼容   

原文地址：http://blog.csdn.net/qianqianyixiao1/article/details/42581493