1. The simplest CSS Hack distinction IE6, IE7, IE8
css
.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
The above sequence is interpreted as a style of ff, ie8, ie7, ie6 results displayed:
Browse by FF, color is purple
with IE8 browser, the color is red
with IE7 browser, the color is blue
with IE6 browser, the color is green
2.IE678 support pseudo-element
:: after pseudo-elements :: before and is not supported in IE8 and below
IE8 can identify compatible wording: after and: before
Compatible IE6 / 7 incorporated jq plug is required: jquery.pseudo.js
Usage:
1, introducing jQuery
2, is introduced jquery.pseudo.js
. 3, add css, such as p {before: "before"; }
Code Example:
3.a labels have nested img border
html code: IEs browser:
4. HTML5 compatible new label
The first method: using javascript code
<!--[if lt IE 9]>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
The second method: using html5shiv
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
//由于国内google的服务器访问卡,建议调用国内的cdn
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
5. compatible video audio tag
First Method: Add the following script in the head section of the page
(Note: in the server need to open)
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
The second method: using Google script file html5media
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
6. Compatible css3 selector
Use key official website method :( plug http://selectivizr.com/ )
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
- css style can not be directly written in the head of the head, it needs to be introduced into the link by the external style
- JS libraries need to be introduced prior to use of the plug, such as jQuery
- Need to run to be effective in the server
7. compatible placeholder
IE10 does not support the placeholder and below
Instructions:
<!-- 对于IE 10 以下版本placeholder的兼容性调整 -->
<!--[if lt IE 10]>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function () {
//浏览器不支持 placeholder 时才执行
if (!('placeholder' in document.createElement('input'))) {
$('[placeholder]').each(function () {
var $tag = $(this); //当前 input
var $copy = $tag.clone(); //当前 input 的复制
if ($copy.val() == "") {
$copy.css("color", "#999");
$copy.val($copy.attr('placeholder'));
}
$copy.focus(function () {
if (this.value == $copy.attr('placeholder')) {
this.value = '';
this.style.color = '#000';
}
});
$copy.blur(function () {
if (this.value=="") {
this.value = $copy.attr('placeholder');
$tag.val("");
this.style.color = '#999';
} else {
$tag.val(this.value);
}
});
$tag.hide().after($copy.show()); //当前 input 隐藏 ,具有 placeholder 功能js的input显示
});
}
});
</script>
<![endif]-->
Note the use of the place:
The above code still jq, before using Note To quote jq file
8.IE678 compatible media media queries
How to use: Plug respond.js (official website plug- HTTPS: //github.com/scottjehl / ... )
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
Note the use of plug-compatible place:
1.css style can not be written directly in the head of the head, it is necessary to introduce an external style by Link
2. In the server needs to run only valid
after the introduction of 3.js to be introduced in css
Code Example: IE7 test results:
8.eval compatible IE678
eval compatibility issues
IE6 / 7/8 are not compatible, given
solutions:
A) var S = "function () {Alert () 'the Test!'}";
B) var S = "0 0:? Function () {Alert ( 'the Test ! ')} ";
C) = var Fn the eval (" (|| 0 "+ S +") "); Fn ();
e) var fn = eval("(0," + s + ")"); fn();
f) var fn = eval("0,(" + s + ")"); fn();
(Note: a / b / c program is to find foreign websites, e / f is the website to find)