條件注釋判斷瀏覽器版本
<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->
- 1.jquery只支持2.0以下的
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>
<!--[if IE 8]>
<script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"></script>
<![endif]-->
- 2.swiper.js 2.x版本支持ie7-10
初始化swiper對象時脂凶，2.x版本和更高版本的方式是不同的，2.x版本的容器選擇器是一個字符串枯怖，而更高版本是一個對象唐片，如果用高版本的方式初始化對象則會報錯
selector:".swiper-container"http://低
selector:{el:".swiper-container"}//高
- 3.兼容h5的新標簽
使用Google的html5shiv包（推薦）
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
但是不管使用以上哪種方法,都要初始化新標簽的CSS.因為HTML5在默認情況下表現(xiàn)為內(nèi)聯(lián)元素厚柳，對這些元素進行布局我們需要利用CSS手工把它們轉(zhuǎn)為塊狀元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
但是如果ie6/7/8 禁用腳本的用戶,那么就變成了無樣式的"白板"網(wǎng)頁,我們該怎么解決呢?
我們可以參照facebook的做法，即引導用戶進入帶有noscript標識的 “/?_fb_noscript=1”頁面熊杨，用 html4 標簽替換 html5 標簽曙旭，這要比為了保持兼容性而寫大量 hack 的做法更輕便一些盗舰。
<!--[if lte IE 8]>
<noscript>
<style>.html5-wrappers{display:none!important;}</style>
<div class="ie-noscript-warning">您的瀏覽器禁用了腳本，請<a href="">查看這里</a>來啟用腳本!或者<a href="/?noscript=1">繼續(xù)訪問</a>.
</div>
</noscript>
<![endif]-->
這樣可以引導用戶開啟腳本,或者直接跳轉(zhuǎn)到HTML4標簽設計的界面桂躏。
- 4.解決IE8不支持一些css3屬性
1.transform：我是用transform來使元素水平垂直居中的钻趋，ie轉(zhuǎn)換起來太麻煩改用table-cell的方法實現(xiàn)水平垂直居中了
2.max-width：100%；
改成
{
max-width: none;
width: auto;
} - 5.媒體查詢
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
- 6.偽元素選擇器兼容
<body>
<div>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>
如果要讓第2個p元素變成“藍色”字體.
一般是這樣寫 div p:nth-child(2) { color:blue; }
或者 div p:nth-of-type(2) { color:blue; }
或者 就是給第2個p元素加上class了剂习。
IE7蛮位，IE8上進行兼容：
<body>
<style>
div p:first-child+p { color:blue; }
</style>
<div>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>
這時就可以在IE7，IE8上進行兼容了
兼容的樣式要和其它代碼分開鳞绕，不能為了使用相同的樣式而用逗號隔開
.t1,.t2 { 這樣不行
...
}
8.border-radius失仁，box-shadow 兼容
使用插件pie.htc
（下載地址：http://css3pie.com/download/）
behavior: url(相對于當前文件的路徑/pie.htc);9.行數(shù)限制的兼容性代碼
使用插件jquery.ellipsis.js
插件使用
<!--[if lte IE 9]>
<script>
$(function(){
$(".industry .detail").ellipsis({
row:4
})
})
</script>
<![endif]-->
插件代碼jquery.ellipsis.js
(function($) {
$.fn.ellipsis = function(options) {
// default option
var defaults = {
'row' : 1, // show rows
'onlyFullWords': false, // set to true to avoid cutting the text in the middle of a word
'char' : '...', // ellipsis
'callback': function() {},
'position': 'tail' // middle, tail
};
options = $.extend(defaults, options);
this.each(function() {
// get element text
var $this = $(this);
var text = $this.text();
var origText = text;
var origLength = origText.length;
var origHeight = $this.height();
// get height
$this.text('a');
var lineHeight = parseFloat($this.css("lineHeight"), 10);
var rowHeight = $this.height();
var gapHeight = lineHeight > rowHeight ? (lineHeight - rowHeight) : 0;
var targetHeight = gapHeight * (options.row - 1) + rowHeight * options.row;
if (origHeight <= targetHeight) {
$this.text(text);
options.callback.call(this);
return;
}
var start = 1, length = 0;
var end = text.length;
if(options.position === 'tail') {
while (start < end) { // Binary search for max length
length = Math.ceil((start + end) / 2);
$this.text(text.slice(0, length) + options['char']);
if ($this.height() <= targetHeight) {
start = length;
} else {
end = length - 1;
}
}
text = text.slice(0, start);
if (options.onlyFullWords) {
text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, ''); // remove fragment of the last word together with possible soft-hyphen characters
}
text += options['char'];
}else if(options.position === 'middle') {
var sliceLength = 0;
while (start < end) { // Binary search for max length
length = Math.ceil((start + end) / 2);
sliceLength = Math.max(origLength - length, 0);
$this.text(
origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
options['char'] +
origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
);
if ($this.height() <= targetHeight) {
start = length;
} else {
end = length - 1;
}
}
sliceLength = Math.max(origLength - start, 0);
var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);
if (options.onlyFullWords) {
// remove fragment of the last or first word together with possible soft-hyphen characters
head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
}
text = head + options['char'] + tail;
}
$this.text(text);
options.callback.call(this);
});
return this;
};
}) (jQuery);
