那些年我遇到的IE BUG...

随着移动设备的地位越来越主导,好多奋斗在前端道路上的童鞋奔向了HTML5的浪潮,不再兼容那老古董ie6,7,8。我甚至怀疑写这篇文章的含义,后来想想,跟我一样还要坚守ie阵营的还有大部分,这也是一种积累。

我只写我碰到过的,其实这些问题及其解决方案网上一搜一大把,但是,但是,我注重体验~!@#¥%……


双边距bug

这是每个新手必碰到的,我当年也是靠这个认识hack的,现在想想,其实才过了两年,怎么感觉自己老了好多...

目标:ie6

现象:浮动布局中,如果对浮动元素设置与浮动方向相同的margin,在ie6下会双倍展示

Chrome下:

IE6下:

你可以猛击:DEMO

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

PS:刚开始不知道是同个方向才会,就习惯性都加inline,现在都是力求写不同方向避免这个问题


断头台BUG(3px间隙)

这是一个很容易忽略过去的bug,发生的条件就在像新浪微博那样的feed列表里,当我们还在冥思苦想为啥ie6下右边的被一张很标准的图片撑破了,却没有发现他和左边头像的间隙稍微粗了那么一点点,可以插多一根...牙签了。

目标:ie6

描述:两个元素一个浮动一个不浮动的时候,ie6下他们之间有一条3px间隙

Chrome下:

IE6下:

你可以猛击:DEMO

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


绝对定位元素的1px间距

这样的问题像我这样的强迫症是很难遇到的,我喜欢偶数和取整,什么499px,501px之类的深深的打击了我,但是UI就是喜欢随性...

目标:ie6

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

Chrome下:

IE6下:

快来看:DEMO

解决方法:父元素宽高改为偶数就行了...


img导致a标签失效

这个bug是在一个偶然的做幻灯片的时候遇到的,常见于各种图片比较不可控的图床展示中,试问谁那么蛋疼在a和img搞夹层,好吧,就是我。

目标:ie6, ie7

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

Chrome下:

IE6/7下:

还不猛击:DEMO

因为截图截不了鼠标,所以将就着看吧,现代浏览器下都是竖中指,说明可点,ie67下就是可怜的默认鼠标啦。


绝对定位使Cursor失效

这个问题发生的条件略显苛刻,首先要父级是绝对定位,子元素没背景,然后还要各种爸爸,爷爷,祖父级别的都没包裹住,写demo的时候试图还原这个bug,就因为body写了个height:100%重现不了。

目标:ie6, ie7, ie8

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

这就不上图了,直接看:DEMO

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


然后就没有然后了...

我会告诉你是因为记不起来么,等我记起来了或者遇到了再补。。。

为啥想的时候感觉好多,写的时候就这么点呢。。。

    发表评论

    *
    *