前段小菜博客记录之路——起点

入行前端开发4个半月，还没有一个稳定的记录习惯；一则本人有些惫懒，二来也觉得没什么好记录的（好吧还是惰性惹的祸）；今天新年的第二天，换个发型，换个心情，换个心态，开始尝试着记录一下前端开发中遇到的问题，有过的“创新”禁，实现过或者有想法却没实现的前端开发手段。

唔~闲话少说了，还是先来看看今天的记录点~一个大牛小牛，大鸟小鸟也许都遇到过前端bug。

bug前记：

今天（算昨天了）脑抽了，早早就睡觉了（也不早，11点吧），万万没想到1点多就醒了之后便是难眠啊（哈哈，这算不算bug？）~夜来风雨声，起床敲代码吧~

bug中：

步入正题，今天的bug是酱紫——页面缩放出现1px空白（很是无厘头啊）。

如图：

在我进行页面缩放的时候，页面大小>100%或<100%都能触发，在主内容区和footer之间常常会出现1px空白，但是F12后获取到的各部分高度均属正常（写的固定值），于是我给footer加上了背景色——ok，1px被填充了，很好，bug源找到了，背景？！

重新看了下footer的css代码：

position: relative;margin: 0px auto;width: 100%;background: url(../img/footer-bg.jpg) no-repeat center;

好吧~，background-position只有一个center，那么横向纵向都会默认为居中；那么问题来了，一个高120px的图在高120px的容器中应该是ok的啊？亲，别天真了，在你进行缩放的那一刻你就该意识到浏览器没那么精准了，它把你的容器“变形”了，于是我把position改为top center~ok，问题解决。

bug后记：

提醒自己和大家一点，不要想着用户操作浏览器改变页面大小之后浏览器还是完美还原你的页面，你的元素早就被“玩坏了”，所以开发过程中一定注意这种1px的bug，多观察。而且这种bug的解决方式都不太一样，看具体情况把；比如我现在是主内容区和footer之间自然取top，如果header和主内容区自然取bottom。

最后，我想我的处理方式应该不是那么合理，但是目前我能想到的也就这样了，如果大家有更好的意见可以告诉我，欢迎斧正。