前端兼容性問題

css hack:

　CSS hack因爲不一樣廠商的瀏覽器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。

  簡單的說，CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。

　css實例

.color{
    background-color: #CC00FF;        /*全部瀏覽器都會顯示爲紫色*/
    background-color: #FF0000\9;    /*IE六、IE七、IE8會顯示紅色*/
    *background-color: #0066FF;        /*IE六、IE7會變爲藍色*/            
    _background-color: #009933;        /*IE6會變爲綠色*/
}
background: red;       /* 對FF Opera和Safari有效 */
#background: blue;      /* 對 IE6 和 IE7有效 */
_background: green;      /* 只對IE6有效 */
/*/background: orange;*/      /** 只對IE8有效 **/
!important         /*FF、IE7有效*/
*         /*IE都有效*/

 

flex（微信兼容性）：

在外層加上：flex-direction: column;display: flex;

 

html頭部標籤：

若頁面需默認用極速核，增長標籤：<meta name="renderer" content="webkit"> （兼容360瀏覽器（兼容模式）：）

<meta http-equiv="X-UA-Compatible" content="chrome=1">（讓網頁優先採用Chrome渲染）

 

ie六、ie7兼容性問題,經常使用有兼容性問題的屬性(這些屬性不只在ie低版本兼容有問題，在火狐等瀏覽器也有，所以須要加前綴)

邊框
border-radius
box-shadow
border-image
背景
background-size
顏色
opacity
RGBA
文本
word-wrap
文本裝飾
text-shadow
僞類選擇符
last-child
only-child
nth-child(n)
:empty
:checked
單位
rem
deg
伸縮盒flex(都不支持)
轉換Transform(都不支持)
過渡 Transition(都不支持)
動畫 Animation(都不支持)
媒體查詢 Media Queries(都不支持)

 

ie六、ie7特殊狀況：

1.height低像素值無效

案例：height:5px;    height高度實際表現爲大於5像素，問題產生是由於ie6下容器默認行高的影響；爲高度太低元素添加溢出部分隱藏屬性便可  解決方案：height:5px;overflow:hidden;

2.margin值雙倍邊距

案例：margin:0 10px;float:left;      margin左右邊距實際表現爲20像素，問題通常發生於浮動元素，緣由是ie6下浮動元素margin值默認變成雙倍；爲浮動元素添加行間元素屬性便可，優化了同行元素的排版表現     解決方案：margin:0 10px;display:inline;float:left;

3.max-width、min-width、max-height、min-height等屬性無效

最大最小寬高屬性在網頁須要它出現時並無給面子，問題緣由是ie6不支持；解決辦法是使用expression來實時獲取元素當前適合寬高

解決方案：

max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");
min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");
min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");
min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");

4.fixed屬性值無效

案例：position:fixed;top:100px;left:10px;

預想中的懸掛效果並無出現，緣由很簡單ie6根本不支持；咱們的解決辦法是改變元素的懸掛爲定位並使用expression來實時處理元素當前顯示位置

解決方案：

position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:10px; 

5.定位元素上下或左右屬性同時賦值時無效

案例：position:absolute;top:0;bottom:0;left:0;right:0;

畫布實際表現爲並無按預想的全屏伸展開，問題產生緣由是ie6下上下或左右定位屬性同時存在時只識別上與左；爲元素賦於寬高屬性便可

解決方案：

width:100%;height:100%;position:absolute;top:0;left:0;

6.透明png格式圖片的背景問題

網頁上的糟糕表現爲出現了灰背景，緣由是ie6不支持png透明或png8及其以上的alpha透明度；網上的解決辦法不少，javascript辦法最多但都有通病，自己加載時間與之帶來的網頁負載，尤爲是在網頁自己負載就很大或網頁上有過多須要處理的png圖片的狀況，會致使原本性能就很差的ie6瀏覽器明顯停滯甚至崩潰，因此這裏咱們推薦的是css與圖形處理兩種純自然處理方式，首先來看css濾鏡處理

解決方案：

background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");

7.width等百分比值計算時有誤

如剛好有4個25%充滿外部容器，外容器寬度不是恰到好處時實際寬度會溢出，第4個元素會換行，問題的產生是由於ie6/7網頁計算自適應處理能力不足；較爲穩妥的處理方案是爲ie6/7少量減小寬度

解決方案：

width:25%;*width:24%;

8.元素有margin上邊距值且處於最前或下邊距值且處於最後，外部容器高度不能自適應

外容器沒有按理想情況自適應撐開，從內間隙變成了外間隙，突出表如今外容器有背景色等特徵可被明顯觀察時；根據狀況更換元素或外容器的margin爲padding

9.清除浮動

.clearfix:after { content: ''; display: block; height: 0; clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }

10.懸掛元素工做時表現失常，頁面滾動時有明顯的停頓抖動

案例：position:fixed;

本來該吸附在頁面上的元素並無使人滿意的工做，緣由是網頁帶給瀏覽器的性能消耗過大如網頁上有動畫等；直接辦法是添加一個叫作隱藏被旋轉元素背面的屬性

解決方案：

position:fixed;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;

11.圖片等元素不能自適應垂直居中

案例：<p><i><img src="" width="120" height="120" /></i></p>

解決方案：

p{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;}p img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}p i{position:static;+position:absolute;top:50%;}