IE CSS兼容JS下載
在Web開發中，有時候我們需要在不同的瀏覽器中進行兼容性處理，其中IE瀏覽器是最為麻煩的一種情況，因為它不支持現代CSS和JS的某些屬性和方法。為了解決這個問題，我們可以使用以下的方式來下載并使用IE CSS兼容JS。
1. 下載IE CSS 兼容JS庫，比如說html5shiv和respond.js。
<!-- 添加以下代碼到 <head>標簽內 --> <!-- HTML5 Shiv --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]--> <!-- Respond.js --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
2. 在頁面中使用IE CSS兼容JS中的CSS屬性和JS方法。
.box {
max-width: 960px;
width: 100%;
padding: 20px;
background: #fff;
/* 使用 CSS3 關鍵字 linear-gradient() */
background: linear-gradient(to bottom, #fff, #f1f1f1);
background: -webkit-linear-gradient(top, #fff, #f1f1f1);
background: -moz-linear-gradient(top, #fff, #f1f1f1);
background: -o-linear-gradient(top, #fff, #f1f1f1);
/* 使用Modernizr檢測CSS3屬性*/
.box2:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: linear-gradient(to bottom, #000, #d95f02); /* 老版本瀏覽器不支持此屬性 */
background: -webkit-linear-gradient(top, #000, #d95f02);
background: -moz-linear-gradient(top, #000, #d95f02);
background: -o-linear-gradient(top, #000, #d95f02);
position: absolute;
right: -110px;
top: 0;
}
}
/* 使用IE兼容JS的JS樣式表 */
@media screen and (min-width: 768px) {
.box {
width: calc(50% - 40px);
float: left;
}
/* 使用matchMedia代替*/
var mediaQuery = window.matchMedia('(min-width: 768px)');
if (mediaQuery.matches) {
// 處理大屏邏輯
} else {
// 處理小屏邏輯
}
}通過以上的方式，我們就能夠在IE瀏覽器中支持現代的CSS和JS方法，較好地解決了兼容性問題，提高了Web的易用性和可訪問性。