整理IE6下的bug.docxVIP

ie6常见css bug 一、IE6双倍边距bug 如下图所示，一个样式里面既设定了“float：left；”又有“margin-left：100px；”的情况，就呈现了双倍情况。如外边距设置为100px， 而左侧则呈现出200px，解决它的方法是在浮动元素上加上display:inline;的样式，或者尽量少用这种形式，这样就可避免双倍边距bug。 IE6和FF下： 二、3像素问题及解决办法 问题：2列布局。左列固定，右列液态 当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了。解决方法有几种，对于网上非常流行的给右侧div增加margin-right: -3px我不是很赞同，大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效，解决方法：可以同样给右侧设置左浮动。(还有其他方法) IE6和FF下： 三、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？ 这种情况可在父窗口加上 overflow:hidden/overflow:auto;zoom:1;这两个样式属性，overflow:auto; 是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持!--[if IE]这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的!--[if IE]中，这样应该可以通过验证了。 四、超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A（一般现在只用hover就可以了）a:link {color: #1f3a87; text-decoration:none;}a:visited {color: #83006f;text-decoration:none;}a:hover {color: #bc2931; text-decoration:underline;}a:active {color: #bc2931;} 五、li在IE中底部3像素的BUG（增加浮动解决问题） 设计原型： 两个红色中间是li1px的底边框； 在IE6，IE7下显示为（如图）：貌似li多了个 margin-bottom:3px； 解决方案：在li上加float:left；问题解决了，当然根据设计稿的精神还要加个width:100%；以前我们老是研究清除浮动，想不到今天却用增加浮动来解决问题 六、li在IE中底部空行的BUG li在IE中底部出现的不是3像素而是一整条空白行 CSS样式代码如下： * {padding:0;margin:0;} li { } li a {background:#CCC; border-bottom:1px #000 solid; text-decoration:none; display: block; } li a:hover {background:#BBB;} IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。 解决方案1：在li a 样式中加入zoom:1； 解决方案2：在li 样式中加入display:inline； 解决方案3：在li a 样式中加入width:100%或者一个宽度值； 七、IE6中奇数宽高的BUG IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。 FF下 IE6下 八、IE6下为什么图片下方有空隙产生 解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom还可以设置父容器的字体大小为零，font-size:0 九、ie6下空标签高度问题 一个空div如果高度设置为0到19px，IE6下高度默认始终19px。例如：.text { background-color:#f00; height:0px; /*给定任何小于20px的高度 */} div/div 如果不让它默认为19PX。而是0PX的话解决方法有3种：1.css里面加上overflow: