条件注释判断浏览器版本
<!--[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"//低
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在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?
我们可以参照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">继续访问</a>.
</div>
</noscript>
<![endif]-->
这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。
- 4.解决IE8不支持一些css3属性
1.transform：我是用transform来使元素水平垂直居中的，ie转换起来太麻烦改用table-cell的方法实现水平垂直居中了
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.行数限制的兼容性代码
使用插件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);
