CSS IE6的兼容问题
一 IE6 ,7不支持小于12px的盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div { width: 700px; height: 4px; background-color: red; /* 在IE67里面height不能用 用以下的方式兼容 必须小于height*/ font-size: 4px; } </style> </head> <body> <div></div> </body> </html>
浏览器中的 hack问题
https://www.cnblogs.com/mumble/p/4576489.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 100px; border: 1px solid black; /* 带下划线的只能在IE6中有用，在IE6以上没有用 */ _background-color: blue; } </style> </head> <body> <div></div> </body> </html>
所以第一个例子就可以修改成这样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div { width: 700px; height: 4px; background-color: red; /* 在IE67里面height不能用 用以下的方式兼容 必须小于height 加上 _ 只有IE6才能识别*/ _font-size: 4px; } </style> </head> <body> <div></div> </body> </html>
解决微型盒子的正确写法 比如隔墙法 和 内墙法
height: 4px;
_font-size: 4px;
IE6不支持用 overflow:hidden清除浮动
解决方法 添加_zoom:1; zoom放大的意思
实际上zoom：1能够触发IE6的hasLayout机制，这个机制只有IE6有，这里是初学博客，暂不深究，可自行百度
需要强调的是overflow:hidden 溢出盒子的内容隐藏是IE6兼容的，但是用于清除浮动在IE6下不兼容
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0px; padding: 0px; } li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; text-align: center; } .box1 { overflow: hidden; /* IE6 中不支持overflow:hidden清除浮动，所以添加以下代码解决 */ _zoom:1; margin-bottom: 10px; } </style> </head> <body> <div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div class="box2"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
IE6的双倍margin bug
当出现连续浮动元素 携带和浮动方向相同的margin时 那么在IE6中队首的元素会双倍margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } div { height: 100px; border: 1px solid red; /* 解决向左浮动 有边margin40px的队首元素没有距离的问题 */ padding-left: 40px; } div ul li { list-style: none; background-color: blue; height: 50px; width: 70px; /* 当出现连续浮动元素 携带和浮动方向相同的margin时 那么在IE6中队首的元素会双倍margin */ float: left; /* margin-left: 40px; */ /* 解决方法 浮动方向和margin的方向不一样 且在父元素增加浮动方向的padding 这个应当是习惯 或者给队首元素加一个class单独设置一半margin 不推荐*/ margin-right: 40px; } </style> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
IE6的三像素(3pxbug)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } div { width: 400px; height: 400px; background-color:orange; } p { /* 如果是margin-top 如果div不加边框 会使div距离上边20像素 */
/* 出现条件 浮动 父子之间使用margin */
/* 在高级浏览器中 是20px 但是在IE6中会多三像素 23px 解决办法 不用管 因为不允许在父子之间使用margin 所以不会出现，如果你出现了 代码不标准 */ margin-left: 20px; width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div> <p></p> </div> </body> </html>
