HTML5/CSS3hack

浏览数：47 / 时间：2015年06月09日

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

Media Query 媒体查询

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

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然后下载里面就有这两文件了哦

<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>

HTML5标签

<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>

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

将sizingMethod设置为scale就OK了。
还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。
好了，目前来说我所遇到的IE8+兼容性问题就这些啦。前端和后端我都做一点，这样的好处在于一个人能够独立开发网站，坏处就是各方面都不精。如果你有蛮重要的补充，或者更好的解决方法，欢迎告诉我！