前端開發常見的相容性問題

作為乙個前端開發者，最煩惱的應該是解決瀏覽器的相容問題了吧，為了使網頁能在瀏覽器下正常展現和提高使用者的體驗度。現在我來總結下我在工作中所遇到的一些問題以及我的一些解決方法。

==ie瀏覽器使用濾鏡實現==
filter:progid:dximagetransform.microsoft.alpha(style=0,opacity=50)
==非ie瀏覽器==
opacity:0.5

例如：加上字首

-moz- /*firefox瀏覽器*/ -webkit- /*webkit核心瀏覽器*/

-o- /*opera瀏覽器*/

**這時我們可以使用less css framework解決書寫樣式的相容性問題**

*less將css賦予了動態語言的特性，如變數、繼承、運算、函式。less既可以在客戶端上執行（支援ie6+,webkit,firefork)，也可以借助node.js或者rhino在伺服器端執行。*

解決方法：用 css3 解決這個問題

div

利用以下樣式來統一初始化

body

浮動ie產生的雙倍距離（ie6雙邊距問題：在ie6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。）

div

這種情況之下ie會產生200px的距離

解決方案是在float的標籤樣式中新增**display:inline;**將其轉化為行內屬性。

div在ie6下無法遮蓋select，原因是在ie6下，瀏覽器將select元素視為視窗級元素，這時div或者其它的普通元素無論z-index設定的多高都是無法遮住select元素的。

解決方法：

1：當浮動層div出現的時候，用js將select隱藏，當浮動層div消失的時候select恢復出現。

2.可以用ul,li等進行模擬乙個select的元素

解決方法:ie6下使用gif

可以加 !important解決

這個倒沒有啥解決方法，只能統一用var關鍵字

解決方法：在父級新增

主要問題**於devicepixelratio

原因是手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，若要在手機裡顯示更為清晰，必須使用2x的背景圖來代替img標籤（一般情況都是用2倍）。例如乙個div的寬高是100100，背景圖必須得200200，然後background-size:contain;，這樣顯示出來的就比較清晰了。**可以如下：

background:url('../img.png') no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; height:50px;
或者指定 background-size:contain;

解決方法：css增加cursor:pointer。

-webkit-transform-style: preserve-3d; /*設定內嵌的元素在 3d 空間如何呈現：保留 3d*/

-webkit-backface-visibility: hidden; /*(設定進行轉換的元素的背面在面對使用者時是否可見：隱藏)*/

解決方法：設定觸屏即播

$('html').one('touchstart',function())

解決方法:

1.盡可能地使用合成屬性transform和opacity來設計css3動畫，不使用position的left和top來定位

2.開啟硬體加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

解決方法：line-height：normal

以上就是工作中經常遇到的相容問題以及解決方法，後期遇到其他的會繼續更新哦~~

前端開發常見的相容性問題

Web前端常見相容性問題

常見相容性問題

常見相容性問題

前端開發常見的相容性問題

Web前端常見相容性問題

常見相容性問題

常見相容性問題

相關推薦