ie6常见bug
IE6经典BUG
-
ie6怪异解析之padding和border算入宽高
原因 : 未加入文档声明造成非盒模型解析
解决方法 : 加入文档声明 <!doctype html> -
IE6在块元素 , 左右浮动 , 设定margin时造成margin双倍(双边距)
解决方法 display: inline
-
以下三种其实是同一种bug , 其实也不算bug , 举个例子 : 父标签高度20 , 子标签11 , 垂直居中 , 20-11 = 9 , 9要平分给文字上面下面, 怎么分 ? IE6就会与其他的不同 , 所以 , 尽量避免 ;
-
文字大小为技术值边框高度少1px
解决方法 : 字体大小设置为偶数或者line-height为偶数
-
line-height , 文本垂直居中差1px
解决方法 : padding-top 代替 line-height 居中 , 或者line-height 加1或者减1
-
与父标签的宽度的奇偶不同的居中造成1px的偏离
解决方法 : 如果父标签是奇数宽度 , 则子标签也用技术宽度 ; 如果父标签偶数宽度 , 则子标签也用偶数宽度
-
内部盒模型超出父级时 , 父级被撑大
解决方法 : 父级标签使用overflow: hidden
-
line-height 默认行高bug
解决方法 : line-height设置
-
行标签直接会有一小段空白
解决方法 : float或结构并排( 可读性差 , 不建议 )
-
标签高度无法小于19px
解决方法 : overflow : hidden;
-
左浮动元素margin-buttom 失效
解决方法 : 显示设置高度 or 父标签设置 padding-buttom 代替子标签的margin-bottom or 再放个标签让父标签浮动 , 子标签 margin-bottom , 即 ( margin-bottom与float不同时作用于一个标签 )
-
img于块元素中 , 底边多出空白
解决方法 : 父级设置overflow : hidden; 或者img { display: block } 或者 margin: -5px
-
li之间会有间距
解决方法 : float: left;
-
块元素中有文字及右浮动的行元素 , 行元素换行
解决方法 : 将行元素置于块元素的文字前
-
position下的left , bottom错位
解决方法 : 为父级( relative层 ) 设置宽高 添加 zoom : 1;
-
子级中有设置position , 则父级overflow 失效
解决方法 : 为父级设置position: relative
