双边距BUG

目标:ie6

描述:浮动布局中,如果对浮动元素设置与浮动方向相同的margin,在ie6下会双倍展示(请在ie6浏览器下观察)

float:left; margin-left:30px

解决方法:在浮动的元素加上_display: inline

PS:这bug通常我们是可以绕开的,比如float:left,只写margin-right来调间距,并让父级元素来配合实现想要的效果

断头台BUG(3px间隙)

目标:ie6

描述:两个元素一个浮动一个不浮动的时候,ie6下他们之间有一条3px间隙(请在ie6浏览器下观察)

float:left
float:none

解决方法:在不浮动的元素加上_margin-left: -3px,如果已经写了margin-left,则在此基础上减去3px

绝对定位使Cursor失效

目标:ie6, ie7, ie8

描述:在ie下,父元素使用绝对定位时,那么对于父元素内的子元素的cursor属性会失效

position:absolute; position:absolute; cursor:url(images/big.cur), auto;

解决方法:在子元素中使用background-image:url(about:blank),如果你设置了背景颜色之类的就不会出现这个问题

PS:明显上图是看不出bug的,因为发生的条件是上级没包裹住,请看这个DEMO

PS:如果body设置了height: 100%,是不会出现这个问题滴

Cursor:url()失效

目标:ie6, ie7, ie8

描述:自定义(相对路径)图片的鼠标指针,在ie下华丽丽的失效了

cursor: url(images/big.cur), auto; // 移到这里有自定义鼠标指针

解决方法:自定义图片的路径要写绝对路径,如 cursor: url(http://travisup.com/images/big.cur), auto

PS:这个bug在本地服务器或者是静态页面是测不出来的

img导致a标签失效

目标:ie6, ie7

描述:在ie6 7下,当img元素包含在多个层级关系里时,只要触发了img元素的父元素的hasLayout,那么就会造成在外层的a标签失效

a>span>img

上图是a>span>img层级,在ie6 7下点击是打不开新窗口滴

解决方法:不触发img父元素的hasLayout(如:float, zoom, position, inline-block等)

PS:遇到这问题我是敬而远之,换种组合不跟他折腾了

绝对定位元素的1px间距

目标:ie6

描述:父元素相对定位且宽度(高度)为奇数,在ie6下子元素绝对定位就会产生1px间隙(请在ie6浏览器下观察)

width: 499px;
position:absolute; right:0;

解决方法:父元素宽高改为偶数,强迫症的孩纸真心不喜欢奇数

躲猫猫BUG

目标:ie6

描述

float:left; // 浮动的元素
// 不浮动的元素

解决方法:/p>