hack(兼容IE及浏览器常用的写法)
hack 分两种 HTML hack 和CSS hack
html hack
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>hack(html hack)</title> 8 </head> 9 <body> 10 <!-- 11 hack(真够难为不同浏览器去写不同的HTML css样式) 分为两种 12 html hack 13 css hack 14 15 IE浏览器有很多兼容性问题,给我们提供了一些接口 16 less than or equal ，表示小于或等于 17 lt:less than 小于 18 gt:greater than，表示大于 19 if是如果 lte 代表小于 IE浏览器 9代表版本 20 --> 21 <h2>IE9呈现效果</h2> 22 <!-- [if IE 9]> 23 仅仅在IE9下面呈现出效果 24 <![endif] --> 25 <hr> 26 <h2>IE8</h2> 27 <!-- [if lte IE8]> 28 小于或等于IE8版本的浏览器呈现效果 29 <![endif] --> 30 <hr> 31 </body> 32 </html>
CSS hack
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>hack (css hack)</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 body{ 14 background-color:yellow; 15 /* IE 在属性名的前面加下划线或横线 */ 16 -background-color:blue;/*IE6 独有*/ 17 /* _background-color:red; *//*事实证明，_下划线在IE6及以下版本都可以呈现*/ 18 } 19 p{ 20 font-size: 30px; 21 /* IE8/9 hack符:\0/ ; 需要写在属性值的后面 */ 22 color:red\0/; 23 } 24 h2{ 25 /* IE 6/7/8/9/10 hack符:\9需写在属性值的后面，分号前 */ 26 font-size: 12px\9; 27 } 28 29 /* css 选择器 hack */ 30 /* IE 6 and blow 写法 * html .selector{} */ 31 * html div{ 32 height: 200px; 33 width: 200px; 34 background:purple; 35 } 36 37 /*IE6 不忍四子级选择器*/ 38 /* 39 html>body.selector{} 40 >子选择器：只选择儿子级，后代其他级别不选 41 IE6 不忍四自带选择器，除了IET 豆能正常加载 42 */ 43 div>h3{ 44 color:green; 45 } 46 47 /* IE6 不兼容 交集选择短期力的类选择器连写*/ 48 div.box1.box2.box3{ 49 border:solid 10px pink; 50 border-radius:50%;/*css3 属性 IE8 及以下不兼容*/ 51 height: 500px; 52 } 53 54 /* IE6 盒模型 55 如果不写DTD IE6的盒子是内减的（怪异盒），其他浏览器器外扩 56 解决方法 必须写DTD（!DOctype）约束 57 58 如果盒子高度小于默认字号，不会正常显示。高度会默认的字号 59 解决方法 60 单独给IE6浏览器，强制给个很小的字号 61 62 */ 63 </style> 64 </head> 65 <body> 66 <h2>这是I36/7/8/9/10</h2> 67 <p>这是IE8 9的演示</p> 68 <div class="box1 box2 box3"> 69 <h3>这是DIV的子元素</h3> 70 </div> 71 </body> 72 </html>
浮动的兼容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>浮动的兼容</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 div{ 14 width: 100px; 15 height: 100px; 16 background:yellow; 17 } 18 div.box1{ 19 float:flot; 20 } 21 div.box2{ 22 background-color:red; 23 /* 24 3px的bug 25 情况 一个浮动 一个不浮动，IE6两个盒子中间会出现3px的bug 26 解决方法:(不允许这么写) 27 必须解决：给坐标的浮动盒子加一个-3px的右margin(只给IE6浏览器加,注意hack符) 28 */ 29 _margin-right:-3px; 30 } 31 </style> 32 </head> 33 <body> 34 <!-- IE7 and blow 35 情况:不浮动的盒子(box2)不会钻到(box1)低下(占领它原来的标准流位置) ， 36 IE7 中间不会有间隙 37 IE6以下有间隙 38 解决办法：制作压盖效果用定位 同一级的盒子 要浮动都浮动 39 40 3px的bug 41 情况 一个浮动 一个不浮动，IE6两个盒子中间会出现3px的bug 42 解决方法:(不允许这么写) 43 必须解决：给坐标的浮动盒子加一个-3px的右margin(只给IE6浏览器加,注意hack符) 44 --> 45 <div class="box1"></div> 46 <div class="box2"></div> 47 </body> 48 </html>
IE6 浮动第一个浮动元素双倍margin的问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>IE6浮动双倍margin的问题</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 div{ 14 width: 200px; 15 height: 200px; 16 margin-left:50px; 17 border:1px solid black; 18 } 19 div.box1{ 20 /* 只改变IE6的 把第一个浮动元素的margin减半 ,50px 改成25px 就解决了双倍margin的问题 注意IE6兼容 hack符号*/ 21 -margin-left:25px; 22 } 23 </style> 24 </head> 25 <body> 26 <!-- 27 IE6双倍margin的问题 28 情况:一些元素浮动，有一个与浮动方向相同的margin.第一个元素会出现双倍边距的问题 29 解决方法: 30 1 不允许父子元素之间的间距用儿子的margin去踹，用父亲的padding去挤出来，给第一个浮动的元素清除margin,或者给反方向的margin 31 或者margin-right 32 2 (不提倡 不允许父子之间的间距用儿子的margin去踹) 给第一个元素的margin减半 33 --> 34 <div class="box1"></div> 35 <div class="box2"></div> 36 <div class="box3"></div> 37 <div class="box4"></div> 38 <div class="box5"></div> 39 </body> 40 </html>
