炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

这个Bug出现在IE6、7中,当一个设置了相对定位的元素包裹在设置了overflow:auto 的容器中时,相对定位的元素在现代浏览器中会被裁剪,通过下拉滚动条可看到全部,而在IE6、7中则会出现里容器的元素超过容器的部分会溢出来,滚动条并未发生任何作用。

html代码:

 
<div id="container">
	<div id="box"></div>
</div>

继续阅读炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

偏头痛差点要了我的命,不过这依然不能拖慢我炒冷饭的步伐。今天带来一个非常经典的IE Bug —— 躲猫猫(Peekaboo Bug)。这个Bug主要出现在IE6和IE7里。在看一个国外文档时看到一个作者说IE7自从06年就修复了这个Bug,具体不得知,但在我的例子中IE7还是会出现的。

先讲下出现Bug的环境:一个拥有背景色或者背景图片的容器中,有一个浮动元素以及一个不浮动的元素,最后有一个清除双边浮动的元素,三个元素均不设置宽高,当底部清除浮动的那个元素更靠近上面的浮动元素时,则触发这一Bug。具体表现在:IE6、7中没有浮动的那个元素内容显示不出来,但当你重新刷新一下或者点开另外一个窗口然后再回到原来这个窗口时,内容就会重新显示出来。就我本人测试来看,在不显示内容的区域用鼠标拖选也可以把内容显示出来,或者直接CTRL+A全选一样可以达到效果。
继续阅读炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

当一个html页面头部没有声明DTD的时候,在IE浏览器中就会进入怪异模式,怪异模式下页面渲染标准会遵循IE6以下的低版本渲染标准,从而在IE浏览器中会出现很多异常情况。我们在让一个盒子居中在一个容器时,常常会使用设置margin的左右间距值为auto来实现,然而IE的怪异模式会不认识这个auto值,导致页面无法实现我们想要的效果。在本例中我们删掉页面头部的DTD声明,从而使IE进入怪异模式,来达到我们的演示目的。

html代码:

<div id="container">
	<div id="box">
	</div>
</div>

继续阅读炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙

这个Bug依然出现在可恶的IE6上,当我们做一个垂直列表的时候,希望列表项之间没有空隙,但是在IE6上却会莫名其妙出现空隙。

html代码:

<ul>
	<li><a href="">首页</a></li>
	<li><a href="">产品</a></li>
	<li><a href="">服务</a></li>
	<li><a href="">关于</a></li>
</ul>

继续阅读炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙

炒冷饭系列之IE Bug(3) —— 极小高度

其实名字是我自己起的,暂且叫它“极小高度”吧。将一个盒子的高度设为很小的值,比如1px、2px的时候,为了展示得明显一点,我们为其添加一个实线的border,在IE6里会出现高度并不是自己所设置的那样小,跟现代浏览器有明显的差异。
html代码,很简单,就一个div

<div id="box"></div>

继续阅读炒冷饭系列之IE Bug(3) —— 极小高度

炒冷饭系列之IE Bug(2) —— 双倍Margin

这是IE6的一个渲染Bug,主要是出现在一个具有float与margin且方向一致的盒子模型上。为便于演示,我创建两个盒子,以外面的盒子左边界作为基准线来看看里面的盒子位置问题。上代码:

html代码

<div id="container">
<div id="box"></div>
</div>

继续阅读炒冷饭系列之IE Bug(2) —— 双倍Margin

炒冷饭系列之IE Bug(1) —— 浮动列表阶梯Bug

不知道从哪开始,就想到什么写什么吧。浮动列表阶梯BUG主要出现在IE6、IE7中,再低版本就不在此系列讨论范围内了。直接看例子:

html部分:

<ul id="nav">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

继续阅读炒冷饭系列之IE Bug(1) —— 浮动列表阶梯Bug