炒冷饭系列之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

“炒冷饭系列”计划

总觉得自己的博客太空,没什么实际内容,在接下来的日子里,我将慢慢地充实一下网站。对于前端方面,鉴于个人水平原因,我将采取炒冷饭的方式,将网上被各种无数炒的冷饭再拿来由我来重新炒一遍,比方说IE Bug、js特效、响应式布局或者一些面试考题。一来自己强化记忆,二来充实网站,三来也可以让新手们加深理解。

其实在学习前端之初,面对各种bug、hack什么的很是头疼,而对于js的学习更是一筹莫展,于是便有了“一日一hack,一日一特效”的想法,每一天去学习一种hack,下载一个特效代码,或者下载一个html模板,理解透之后写在自己的博客上。当然这仅仅停留在计划阶段,几年来也未实践过。 继续阅读“炒冷饭系列”计划

招聘的片段记忆

昨天接到一个电话,一家网络公司让我前去面试,做前端开发,惊奇之余将其回绝,因为我还有更重要的事情要做。吃惊在于我没有投过什么简历,总以为智联招聘上的公司都是相当大牌相当苛刻的,现在竟然主动找人,目测是很拙计啦。

突然想起几年前在某房产网就职时,因为个别原因,办公室的小伙伴一个个相继离职。而我作为一个小领导,担当起了招聘的重任。在当地一家人才网交纳会员费后,陆续有人投来简历。由于当时人少任务重,我一个人几乎扛下整个网站,北京总部每周任务催着,导致我不得不加班加点,心力交瘁之际终于有了招聘计划,于是想着来者不拒。 继续阅读招聘的片段记忆