頁面模板
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="description" content="本網站的目的是....." /> 7 <meta name="keywords" content="作品集,素材庫" /> 8 <meta name="author" content="郭菊鋒,xing.org1^"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 10 <!--H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面--> 11 <title>title</title> 12 <link rel="Bookmark" href="img/logo-q.png" /> 13 <link rel="apple-touch-icon" href="img/logo-q.png" /> 14 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 15 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 16 <!--以上四個link是兼容不同瀏覽器的、用以加載標題處圖標logo的寫法--> 17 <link rel="stylesheet" href="css/自己的css文件.css" /> 18 19 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 20 <!--IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame。視情況添加。 21 --> 22 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries，翻譯過來就是讓ie8及以下支持html5用法和media寫法 --> 23 <!--[if lt IE 9]> 24 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 25 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 26 <![endif]--> 27 </head> 28 <body> 29 </body> 30 </html>
rgba使用后，也要用這個filter兼容ie
.rgba{ background: rgba(0,0,0,0.4); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);/*40000000 40表示透明度，不透明為FF 000000表示顏色，此為黑色*/ }
半透明opacity：
1 .opacity{ 2 opacity: 0.5; 3 filter: alpha(opacity=50);/*這個可能不對,不完整*/ 4 -moz-opacity: 0.5; 5 -khtml-opacity: 0.5;/*這個不知道干嘛的*/ filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)/*對，ie的*/ 6 }
和上邊一樣的filter的各種兼容
.filter { filter: progid: DXImageTransform.Microsoft.Alpha(style=0, opacity=50); filter: alpha(opacity=50); opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; }
css鏈接背景圖：
.bgpic{ background: url(../image/btn_show.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../image/btn_show.png"); _background: none; }
關於可伸縮性盒布局box-flex的
/*父元素-橫向排列（主軸）*/
.box { display:box; /*（伸縮盒最老版本）*/ display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ display: -webkit-flex; /* 新版本語法: Chrome 21+ */ display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */ }
/* 子元素—平分比例 */
.boxflex { -prefix-box-flex: 1; /* old spec webkit, moz */ -webkit-box-flex: 1.0; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1.0; /* Firefox 19- */ -ms-flex: 1; /* IE 10 */ box-flex: 1.0; -webkit-flex: 1.0; /* Chrome */ flex: 1; /* NEW, Opera 12.1, Firefox 20+ */ width: 0;/*解決兼容性問題*/ }
inline-block的ie模式
.inlineblock { display: inline-block;/* firefox等標准瀏覽器識別*/ *display: inline;/* 只有ie6和ie7識別*/ *zoom: 1;/* 觸發ie6和ie7下的haslayout */ zoom:1; /* 另一種是不加星號的，我覺得還是加星號吧，因為*只ie6/7識別，而標准的瀏覽器又不需要這么廢話 */ }
—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 2016-12-26 11:04:31
2017-04-19 11:07:22
ie下對清楚浮動的處理
先說點廢話吧：
昨天做了一個后台的頁面，今天沒事就測測ie的兼容性。
恰巧遇到群里一個同學說，float：left在ie8下不兼容，然后大家談到用inline-block，我就來復習了下inline-block的兼容：
於是順便把最近的一個重點再在這里記載以下，以防以后走彎路吧。
說說ie下浮動后錯位導致和正常瀏覽器觀看效果不一致的現象吧：
經過仔細觀察，是因為清楚浮動在ie下沒有效果的原因，
我把內部浮動元素刪掉以后，外表的框就可以被撐起來了，效果也就和普通瀏覽器沒有區別了。
后來我想，換一種方法，把外邊框定死高度，然后依舊該浮動的浮動，勉強撐過這一關。
但是以后，ie不能定死高度的情況下怎么辦？
看來是我清楚浮動的類clearfix的內部代碼沒有寫兼容處理的原因啊。
我在這個頁面的寫法
/*清除浮動*/
1 .clearfix:before, 2 3 .clearfix:after { 4 5 content: ""; 6 7 display: table; 8 9 } 10 11 .clearfix:after { 12 13 clear: both; 14 15 }
其他搜集的比較有用的
清楚浮動方法
第一種寫法：
1 .clearfix:after{ 2 3 content: ""; 4 5 clear: both; 6 7 display: block; 8 9 } 10 11 .clearfix{ 12 13 *zoom: 1; 14 15 }
也是我常用的一種方法。
第二種：/*清除浮動*/寫法
1 .clearfix:after { 2 content: ""; 3 clear: both; 4 display: block; 5 height: 0; 6 visibility: hidden; 7 font-size: 0; 8 } 9 10 .clearfix { *zoom:1;}
這種寫的比較全面，把樣式都格式掉了的感覺，
多一句也沒有害處，目前也沒觀察出多這幾句的好處。
所以我還是個人傾向第一種寫法。
總結就是：我自己當前版本的頁面中少寫了一個：.clearfix { *zoom:1;}
結果就導致ie姥爺的難受
涉及到浮動的地方都會和正常瀏覽器不一致。。。。
看來這不能省啊。
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
2016-12-26 11:04:31
以下片段轉自分享：http://blog.csdn.net/songylwq/article/details/6033567
CSS對瀏覽器器的兼容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點。
常見兼容問題：
1、DOCTYPE 影響 CSS 處理
2、FF：div 設置 margin-left， margin-right 為 auto 時已經居中，IE 不行
3、FF: body 設置 text-align 時， div 需要設置 margin: auto(主要是 margin-left，margin-right) 方可居中
4、FF: 設置 padding 后， div 會增加 height 和 width， 但 IE 不會， 故需要用 !important 多設一個 height 和 width
5、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設置樣式
6、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行
7、cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
8、FF: 鏈接加邊框和背景色，需設置 display: block， 同時設置 float: left 保證不換行。參照 menubar， 給 a 和 menubar 設置高度是為了避免底邊顯示錯位， 若不設 height， 可以在 menubar 中插入一個空格。
9、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣： div{maring:30px;margin:28px} 重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;
10、IE5 和IE6的BOX解釋不一致
IE5下
div{width:300px;margin:0 10px 0 10px;} div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 關於這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持。
11、ul標簽在Mozilla中默認是有padding值的，而在IE中只有margin有值所以先定義 ul{margin:0;padding:0;} 就能解決大部分問題
這里還有一篇大神總結的兼容性文章，專門針對IE瀏覽器(IE6-11)，鏈接如下：
http://www.cnblogs.com/liuzhendong/p/4309790.html
以下是腳本之家的幾篇文章，對於css hack 有很明確、詳細的說明，值得收藏：