隨著前端開發(fā)的不斷發(fā)展，越來越多的css3特性被廣泛應(yīng)用到我們的網(wǎng)頁中，如邊框圓角、陰影、動(dòng)畫等，這些特性大大提升了網(wǎng)頁的用戶體驗(yàn)。然而，不同瀏覽器對(duì)css3特性的支持程度卻不盡相同，可能會(huì)造成網(wǎng)頁在不同瀏覽器中的顯示效果不一致，這就需要我們使用js來解決css3兼容問題。

一、css3兼容性檢測

if(!('border-radius' in document.documentElement.style)){
//不支持border-radius，需要js來兼容
}

上面的代碼可以檢測瀏覽器是否支持border-radius屬性，若不支持則需要我們使用js來兼容。

二、js兼容性處理

var div=document.createElement('div');
div.style.borderRadius='5px';
if(div.style.borderRadius!="5px"){ //不支持border-radius
div.style.MozBorderRadius='5px'; //firefox兼容
div.style.WebkitBorderRadius='5px'; //chrome、safari兼容
div.style.OBorderRadius='5px'; //Opera兼容
}

上面的代碼中，我們創(chuàng)建了一個(gè)新的元素div，并給它設(shè)置了border-radius屬性。然后我們檢測這個(gè)屬性的值是否變化，如果未變化說明瀏覽器不支持border-radius屬性，這時(shí)需要我們使用js來兼容。我們可以針對(duì)性地給不同瀏覽器設(shè)置不同的屬性，如在firefox中使用MozBorderRadius，chrome和safari中使用WebkitBorderRadius，Opera中使用OBorderRadius。

三、使用modernizr庫處理兼容問題

//判斷不支持overflow-scrolling屬性
if(!Modernizr.overflowscrolling){
//處理兼容問題
}

Modernizr是一個(gè)方便快捷的js庫，可以幫助我們處理css3兼容性問題。我們只需引入Modernizr庫，然后使用現(xiàn)成的檢測函數(shù)即可。如上面的代碼中，我們使用Modernizr庫來判斷是否支持overflow-scrolling屬性。若不支持，則可以使用js來兼容。

總結(jié)

以上就是關(guān)于js解決css3兼容問題的方法介紹，不同的兼容性處理方法各有優(yōu)劣，我們需要根據(jù)具體的情況來選擇合適的方法，并盡量避免使用太復(fù)雜的兼容性處理方法，以提高網(wǎng)頁性能和用戶體驗(yàn)。