HTML5/CSS3hack

以下兼容技术我只测试了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+兼容性问题就这些啦。前端和后端我都做一点,这样的好处在于一个人能够独立开发网站,坏处就是各方面都不精。如果你有蛮重要的补充,或者更好的解决方法,欢迎告诉我!


box-sizing

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

box-sizing 兼容脚本下载


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。