文章出處

以下兼容技術我只測試了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





文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()