HTML识别
条件注释法(IE10以及以上版本不支持条件注释)
【注意】两个--和左中括号[之间不能有空格,否则无效
[1]IE9-(<!--[if IE]><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <!--[if IE]> <div class="box" id="box"></div> <![endif]--> </body> </html>
[2]仅单一IE(<!--[if IE 6]><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <!--[if IE 7]> <div class="box" id="box"></div> <![endif]--> </body> </html>
[3]大于 gt || 大于等于 gte || 小于 lt || 小于等于 lte(<!--[if gte IE 8]><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <!--[if gte IE 7]> <div class="box" id="box"></div> <![endif]--> </body> </html>
[4]非IE(IE10以及以上版本也能识别),此处多加的<-->,在IE中被当作内部注释,而在非IE浏览器中会闭合之前的注释(<!--[if !IE]><--><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <!--[if !IE]><--> <div class="box" id="box"></div> <![endif]--> </body> </html>
CSS hack
【1】属性前缀法(只有IE支持)
[1]IE6(下划线、中划线)(_color:blue;-color:blue;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; _background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[2]IE7及以下版本(*号、+号)(*color:blue;+color:blue;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; *background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[3]IE10及以下版本(9)(color:blue9;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red9; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[4]IE8及以上版本( )(color:blue ;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red ; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[5]IE9、IE10(9 )(color:blue9 ;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; 100px; background-color: red9 ; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
【2】选择器前缀法
[1]IE6(*html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *html .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[2]IE7(*+html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *+html .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[3]IE8(@media )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @media { .box{ height: 100px; 100px; background-color: red; } } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[4]IE9+及其他非IE浏览器(:root)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> :root .box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[5]firefox(x:-moz-any-link,)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> x:-moz-any-link,.box{ height: 100px; 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @media screen and (-webkit-min-device-pixel-ratio:0) { .box{ height: 100px; 100px; background-color: red; } } </style> </head> <body> <div class="box" id="box"></div> </body> </html>