之路

IE6鼠标闪烁的bug

之路 — Sat, 07 Aug 2010 16:04:22 +0000

碰到这个bug后，脑子里立马想到了IE6背景闪烁bug，心想很早就听说个这个bug,自己碰到还是第一次，于是按照这个思路走下去，用解决IE6背景闪烁bug的方法一试，果然有效，怀着好奇仔细研究了自己这个所谓的“IE6背景闪烁bug”的代码，却发现并非如此，我又立马意识到我正在接近“一个新的情况”…….

此bug的现象：当鼠标在文字上移动时，在IE6下鼠标形状会在“箭头”和“沙漏（等待）”2中形状中快速变化(闪烁)，在其他浏览器下无此现象。

此bug的主要结构代码为：


    onmousemove="this.className='cur';" onmouseout="this.className='';">
        鼠标形状在闪烁--之路--前端开发

此bug的主要样式代码为：

.list-box{width:300px;}
.list-box li{cursor:pointer; vertical-align:top; zoom:1;}
strong{display:block; padding:6px 0;}
.list-box .cur{font-weight:bold;}
.cur strong{color:#ff0000; background:#ccc url(yd-n85.png) no-repeat 230px -180px;}

查看有此bug的demo

前面说过，我刚开始以为这个bug是IE6背景闪烁bug，故使用了解决IE6背景闪烁bug的方法解决了我这个bug，恩，纯属意外。查看用这种方法解决我这个bug的demo

后来通过从2个方面入手研究此bug

1.如果换成“onmouseover”事件，会怎样？？结果是在所在所有浏览器下鼠标都不会闪烁，不管有没有背景图片请求，查看这种情况下的demo

2.如果鼠标指向时没有背景图片请求，会怎样？？结果是在所在所有浏览器下鼠标都不会闪烁，不管是“onmousemove”事件还是“onmouseover”事件，查看这种情况下的demo

综合以上2种分析发现，此bug产生的2个必须同时满足的条件是使用“onmouseover”事件和鼠标指向时有背景图片请求，破坏其中任何一个条件，此bug不会产生，当然这也是解决此bug的2种方法了。

而这就是一个美丽的误会……

对IE6下一个经典bug的补充

之路 — Sun, 11 Jul 2010 12:40:20 +0000

先说说这个经典的bug：在IE6下，如果父元素的宽度为奇数，子元素position:absolute right:0，则子元素离父元素右边实际为1px。在IE6下，如果父元素的高度为奇数，子元素position:absolute bottom:0，则子元素离父元素下边实际为1px。

补充：经过测试，在IE6下，如果父元素的宽度为奇数，子元素position:absolute right:xpx，则子元素离父元素右边实际为(x+1)px

在IE6下，如果父元素的高度为奇数，子元素position:absolute bottom:ypx，则子元素离父元素下边实际为(y+1)px

bug截图如下：

查看此bug

万能清除浮动方法在firefox中的一个bug

之路 — Sun, 11 Jul 2010 07:36:23 +0000

这个问题和以往的不同，问题只存在于firefox中，让人颇为“兴奋”。问题是这样的：当一个元素X内部有浮动元素并且自身使用了“万能清除浮动方法”，其下面的元素Y如果有margin-top值，则会在X元素上方产生一个与Y元素margin-top值相同高度的空白区域，Y元素margin-top值改变，空白区域的高度随之改变。此问题截图如下：查看此bug的demo

在其它浏览器（IE6/IE7/IE8/google chrome/opera/safari）中表现正常，截图为：

主要的结构为：


    
        之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)
        之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)
    
    之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)

主要的样式为：

.clear_float:after{
                    display:block;
                    visibility:hidden;
                    height:0;
                    clear:both;
                    content:"";
                   }
.clear_float{display:block; zoom:1;}
.wrap{width:960px; margin:0 auto auto auto;}
.head{width:960px; margin-left:auto; margin-right:auto; background-color:#FF0000;}
.box{width:960px; margin:20px auto 4px auto; background-color:#003300; padding:0 0 10px 0;}

之所以说这个问题和清除浮动的方法有关，是因为如果X元素里面没有浮动元素，当然X元素就没有必要使用清除浮动了，这种情况下在firefox里面是没有本文所说的这个问题，所有浏览器下解析一致。理由2是经过测试，如果给清除浮动的class里面的content加“.”，就能解决这个问题。

经过测试，此问题的解决方法如下：

方法1：给X元素（本文中指class为head的元素）padding-top或者padding-bottom值

方法2：给X元素（本文中指class为head的元素）height值

方法3：给清除浮动的class的content加“.”

方法4：给X元素（本文中指class为head的元素）加overflow:hidden

方法5：给X元素（本文中指class为head的元素）上边框或下边框值

查看问题解决后的demo

怀念家驹

之路 — Wed, 30 Jun 2010 05:45:13 +0000

今天是黄家驹逝世17周年纪念日，我们怀念家驹其实是怀念家驹的音乐所表达的精神–大爱–奋斗–理想–自由，当然对这个的理解也不是用言语能表达的清楚的。以下为摘录的网友怀念家驹的文字，共勉！！

无论什么时候，他的歌都会给我带来力量！

家驹的歌曲已经超越了歌曲本身，是一种精神了，激发年轻人的斗志…….

这么多年了，还有这么多人支持，有点感动

永远永远的Beyond 永远的家驹！

黄家驹的歌很有思想深度的，不知道什么时候才会再次出现这种有深度的中文歌。

虽然，现在随着年纪的增长，事业家庭的占据了绝大多数的时间，可只要有空，依然会像以前一样，找个安静的时间，静静的好好地听听家驹，BEYOND的歌，因为这样能带我回到曾经的青春年华，忆往昔，念家驹！

《光辉岁月》是香港摇滚歌手黄家驹献给南非黑人人权精神领袖曼德拉的一首对自由的颂歌。
在黄家驹之前华人音乐人从未写过如此有世界精神的作品。他从一个反叛青年到一个自由火炬的呐喊者，这是一个怎样的变化。

自由是一切专制与极权的天敌。是人类高贵的要求，是精神也是理想。追求自由的人会老去，但自由的信念永远不会老去。追求自由的人的每一天都是光辉岁月！

从没放弃心中的理想.

无尽的思念永远的家驹永远的爱

不死的摇滚乐王，永远的beyond精神！

只想将吉他拥抱，诉出心声

记得以前学吉他，都是以家驹的歌作榜样练习！

家驹的音乐精神无人能超越，创曲与作词真正意义上与懂的音乐的人心灵的沟通。励志的歌曲，对社会的不公和渴望和平的心境由感情出发创造经典的专辑普写说不老的传说。BEYOND是永恒值的推崇的精神代表

高考时就听海阔天空这首歌，一个MP3里就一首歌。每天都必须听的

的确beyond的歌曲是没有任何人的歌曲能够相提并论的，一个用一生去谱写人生的人，是最值得我们敬重的，我也是从小听到大的人，我非常爱他们。

自信可改变未来

我以为随着时间的流逝，除了我们这些最忠实的歌迷，他不会再被人提起，不会再被人记起，不会再被90后或者其他的人熟知，可是我错了！

从第一场演唱会25人听众！到现如今的只要有华人的地方就能听到你的歌；我是在呜咽中听着你的歌！我没有华丽的言语！但祝愿你在天堂能够继续歌唱！再次！再次！呼叫：

家驹让大陆多少年青人抱起了吉他

笑声更迷人

无论什么时候，他的歌都会给我带来力量！

人生总是激波跌荡。爱情只是一部分的生命点缀。命运上的艰辛挫折才起伏才是人生的重要路程。当我年少轻狂。生命极为失意的时候幸运能听到家驹的音乐。这种博大的，充满自强不息，充满理想斗志的音乐！令我始终到现在能坚持自己的理想和生命

IE6/7下padding-bottom导致父元素“溢出”的bug

之路 — Fri, 18 Jun 2010 03:04:33 +0000

又是一个工作中碰到的在IE6/7下的问题，非常让人“不解”。主要症状为：当class为out的div有设置下边框，class为in的div里面的最后一个p有设置padding-bottom时，class为in的div在IE6/7下看起来超出边界，像“溢出”，此bug截图如下：

查看此bug

正常情况下的截图为：

主要结构如下：


    
        之路--前端开发爱好者--IE6/7下padding-bottom导致父元素“溢出”的bug
        之路--前端开发爱好者--IE6/7下padding-bottom导致父元素“溢出”的bug
        class="padd-last">之路--前端开发爱好者--IE6/7下padding-bottom导致父元素“溢出”的bug

主要样式如下：

*{margin:0; padding:0;}
body{font-family:"宋体"; font-size:12px;}
.out{
      border-bottom:60px solid #ff0000;
      background-color:#000000;
    }
.in{color:#fff; background-color:#003300;}
.in p{line-height:30px;}
.padd-last{padding-bottom:1px;}

分析其原因可能是由layout引起的，故可在类out或类in或p加zoom:1;解决，经测试给类in加padding-bottom也可解决问题。

问题解决后的demo

WebRebuild.ORG 北京第二届年会(2010.07.17)

之路 — Wed, 09 Jun 2010 09:28:06 +0000

margin负值在IE6/IE7中的一个bug

之路 — Fri, 07 May 2010 11:00:58 +0000

使用margin负值在IE6/IE7下面有一个小bug–有一部分被隐藏掉了，bug截图如下：详见有此问题的demo

基本html结构如下：


    之路的网站--margin负值在IE6/IE7中的bug
    之路的网站--margin负值在IE6/IE7中的bug
    之路的网站--margin负值在IE6/IE7中的bug
    之路的网站--margin负值在IE6/IE7中的bug
    之路的网站--margin负值在IE6/IE7中的bug

基本css如下：

.box{width:500px; border:5px solid #003300;; padding:2px 30px;}
.box li{
         border-bottom:6px solid #ff0000; border-top:6px solid #ff0000;
         line-height:30px; margin-bottom:-6px;
       }

解决方法是给li加position:relative; zoom:1;，我的理解是加了之后提高了li的层级，问题就解决了

问题解决后css如下：

.box{width:500px; border:5px solid #003300;; padding:2px 30px;}
.box li{
         border-bottom:6px solid #ff0000; border-top:6px solid #ff0000;
         line-height:30px; margin-bottom:-6px; position:relative; zoom:1;
       }

详见问题解决后的demo

第7期web标准化交流会–上海站图记

之路 — Fri, 07 May 2010 10:36:10 +0000

前段时间参加了第7期web标准化交流会上海站的交流活动，以下是这次活动的部分图片，来自携程ued博客

滑动门+tab+css sprites

之路 — Thu, 15 Apr 2010 04:49:06 +0000

关于滑动门的介绍可以参考我之前发布的滑动门的“2”种实现方法，这次主要介绍将滑动门和tab以及css sprites结合在一起的一个例子，截图如下：

主要结构代码为：

主要样式代码为：

.wrap02{font-size:14px; height:29px; border-bottom:1px solid #d3d8de;}
.wrap02 ul{font-size:14px; position:absolute;}
.wrap02 ul li{float:left; margin-right:8px;}
.wrap02 ul li a{
                 display:block; padding:0 0 0 8px;
			     background:url(slide-tab-sp.png) no-repeat 0 0;
               }
.wrap02 ul li a span{
                      display:block; padding:8px 8px 6px 0; line-height:16px;
                      background:url(slide-tab-sp.png) no-repeat right 0;
                    }
.wrap02 ul li a:hover,.wrap02 ul .cur a{background:url(slide-tab-sp.png) no-repeat 0 -30px;}
.wrap02 ul li a:hover span,.wrap02 ul .cur a span{background:url(slide-tab-sp.png) no-repeat right -30px;}
.cur{font-weight:bold;}

滑动门和css sprites就不用说了，主要想说的是tab的实现。除了背景图片的构造外，下面那条线是重点，核心的样式代码在上面用红色标出了，.wrap02设置了那条线，且高度设为29px，ul的高度为30px并设置position:absolute，这样的话ul就脱离了文档流，显示在.wrap02上面，这样就刚好形成了tab效果，查看demo

滑动门的“2”种实现方法

之路 — Wed, 14 Apr 2010 07:03:24 +0000

这里主要介绍“2”种滑动门(结构相同，样式不同)的实现方法，其实原理都是一样的，截图如下：

方法1的demo

方法2的demo

其主要结构代码为


	看看这个滑动门看看这个滑动门看看这个滑动门

方法1的主要样式代码为：

.box a{
        float:left; text-decoration:none; padding:0 0 0 8px; color:#ff0000;
        background:url(redbutt.gif) no-repeat 0 -1px;
      }
.box a span{
             padding:5px 8px 4px 0; display:block; line-height:14px;
             background:url(redbutt.gif) no-repeat right -1px;
           }

方法2的主要样式代码为：

.box a{
        float:left; text-decoration:none; padding:0 8px 0 0; color:#ff0000;
        background:url(redbutt.gif) no-repeat right -1px;
      }
.box a span{
             padding:5px 0 4px 8px; display:block; line-height:14px;
             background:url(redbutt.gif) no-repeat 0 -1px;
           }

这样理解他们：整个滑动门的构造好比画一个圆，方法1是先画左半圆后画右半圆，而方法2是先画右半圆后画左半圆。

首次裸奔（CSS NAKED DAY）

之路 — Fri, 09 Apr 2010 07:46:14 +0000

今年的CSS NAKED DAY到来了！

首次参加CSS NAKED DAY活动,一直在关注。原定于2010年4月9日，由Dustin Diaz推动的CSS NAKED DAY因故没有如期举行。但是今年WebReBuild.ORG组织了本次活动，虽然错过了WebReBuild.ORG组织的活动报名，却还是要支持这个活动的，故裸。

第6期web标准化交流会–上海站记

之路 — Tue, 06 Apr 2010 06:32:36 +0000

3月27日参加了第6期web标准化交流会上海站的交流活动，总体来说氛围还是不错的,呵呵！

浮动元素最后一行margin失效的问题

之路 — Mon, 29 Mar 2010 04:33:04 +0000

浮动元素最后一行的margin-bottom在IE6/7下失效的问题很早之前就碰到过，这次却有新的发现，bug的出现及出现在IE6或IE7中或2者都有和浮动元素的个数有关

当浮动元素个数为奇数时，此问题同时存在于IE6和IE7中，详见demo1及截图：

当浮动元素个数为偶数时，此问题存在于IE7中，详见demo2及截图：

进一步测试发现此问题存在于IE6或IE7中或2者都有还和浮动元素的父元素的宽度有关，以上2种情况是比较特殊的常见的情况，其他情况有兴趣的可以自己动手试试看(改变浮动元素的父元素的宽度)，一定会有自己的发现和体验

元素在IE6/7下换行的问题

之路 — Thu, 18 Mar 2010 04:45:41 +0000

这是一个奇怪的问题。最后一个li元素在IE6、IE7下换行了，其他的浏览器都是没有问题的。下面是此问题的截图及代码：

主要css代码及demo：

.wrap{width:960px; margin:0 auto;}
.wrap ul{background-color:#FF0000; padding-left:200px; color:#FFFFFF;}
.wrap ul li{float:left; padding:6px 30px;}

开始以为是因为“溢出”产生的换行，就用firebug查看并计算了一下盒模型：

最外层的.wrap 实际宽度是960px
ul的内容宽度是760px(960-200)
6个li的实际宽度是6*(30+30+48)=648px
很明显，所有li的实际宽度和远小于ul的实际宽度，因此并没有产生盒模型溢出，但问题却在IE6、IE7中出现了，实在令人费解

解决办法是给li一个大于等于48px的宽度，或给li加white-space:nowrap;强制其不换行，一般情况下会选择后者，因为一般情况下我们需要 li的宽度自适应
问题解决后的demo

100%宽度与背景平铺的问题

之路 — Fri, 12 Mar 2010 04:28:04 +0000

最近发现了一个问题，当给最外面的元素100%的宽度并给他一个横向平铺的背景后，如果浏览器窗口的宽度小于内容主体的宽度的时候，在IE7、IE8、FF、OP、safari中最外层元素的背景并没有平铺至实际的宽度，但是IE6中却无此“问题”，详见下面此“问题”的截图和demo-bug

解决方法是在

给flash加“链接”的“4”种方法

之路 — Sun, 07 Mar 2010 10:28:36 +0000

一般的swf文件本身是有链接效果的，如果swf文件本身没有链接效果，可以通过“变通”的方法使其拥有“链接”效果

要实现这个目的需要突破以下2个方面:

1.将a“盖到”object上面

2.实现a可点击，有真正的链接效果

实现1有margin负值或position(absolute)2种方法

实现2有给a透明滤镜（filter）或给a里面一个透明的图片2种方法

总结起来的话，就有2×2共4种方法实现给flash加链接

下面是相关的结构代码片段和样式代码片段：

使用透明滤镜时的结构代码

使用透明图片时的结构代码

使用margin+透明滤镜时的css代码

.flash-box{width:760px; height:100px;}
.flash-link{
             width:760px; height:100px;cursor:pointer;
             outline:none; display:block; margin:-100px 0 0 0;
             opacity:0; filter:alpha(opacity=0); background-color:#ffffff;
           }

使用margin+透明图片时的css代码

.flash-box{width:760px; height:100px;}
.flash-link{
             width:760px; height:100px;cursor:pointer;
             outline:none; display:block; margin:-100px 0 0 0;
           }
.flash-link img{border:none;}

使用position+透明滤镜时的css代码

.flash-box{width:760px; height:100px; position:relative;}
.flash-link{
             width:760px; height:100px;  position:absolute; left:0; top:0;
             cursor:pointer; outline:none; display:block; z-index:10px;
             opacity:0; filter:alpha(opacity=0); background-color:#F00000;
           }

使用position+透明图片时的css代码

.flash-box{width:760px; height:100px; position:relative;}
.flash-link{
             width:760px; height:100px; position:absolute; left:0; top:0;
             cursor:pointer; outline:none; display:block; z-index:10px;
           }
.flash-link img{border:none;}

详情请看Demo
margin+透明滤镜时的demo
margin+透明图片时的demo
position+透明滤镜时的demo
position+透明图片时的demo

前缘

之路 — Sun, 07 Mar 2010 06:55:33 +0000

今年春节回家，碰巧正好路过我曾经奋斗过的地方(大学)，于是便进去看了看。由于正值寒假期间，所以校园内人很少，但整个校园依旧很整洁、宽敞、明亮。校园内的一草一木似乎都是那么的熟悉，主楼、教三楼、教四楼等我曾经上课和自习最常去的地方，留下了我青春的身影。由于放假，许多教学楼都封楼了，我只是站在外面看了看，便赶往汽车站了……

站在校园内看着那熟悉的一切，想到了很多，想到了当年一起并肩战斗的那些花儿，想到了自己无意中结识了“前端开发”这个自己钟爱并将为之奋斗的职业。

应该是大三上学期，我们专业开设了一门“网页基础”的课程，主要讲述怎样使用Dreamweaver开发网站(网页)。在我的记忆中，讲这么课的老师似乎什么都没讲，每次上课都用大量的时间讲和这么课无关的事情，但是自己却从这本教材中第一次了解到了“网站(网页)开发”这个概念，并了解到了“html(xhtml)”、“css”、“javascript”等开发语言。于是自己试着按照教材里的步骤一步一步地做了起来，做了一些最“简陋”的页面，当时自己非常兴奋，整个人已经被完全吸引进来了。疯狂的到图书馆找相关书籍，到网上去找相关的书籍，网上找到的书中图书馆没有的便到网上去买(我的网购由此开始)，从那时到毕业到毕业，自己的整个时间除了上课、吃饭、睡觉等之外基本上都花在了看有关“前端开发”的相关书籍上，坚持每天去上自习，但总觉得时间还是“不够用”，学的“不尽兴”。那段时间图书馆的相关书籍基本都被我借看过了，还有自己从网上买的相关书籍。现在想起来那段时间的感觉就是“越学越想学”、“越学越觉得学的不够”、“自己今后就做这个了”。自己真的爱上了这个职业。

和“前端”有缘分，是因为自己学的虽是计算机专业，但并没有在“软件编程”上产生浓厚的兴趣，反而却因为开设的一门“附课”对前端产生了浓厚的兴趣。据我所知，我们寝室的几个兄弟及班上的同学毕业后很多人都从事和“计算机无关”的工作，从事前端的应该只有我了，而这就是缘分。

非常幸运，自己在大学期间就找到了人生(职业)中的一个点，知道了自己真的喜欢什么，也明确了自己的奋斗方向，从而不在迷茫。毕业后，自己就一直从事者前端开发的相关工作，在这个行业里不停地奋斗着、前进着，并将继续为之奋斗。

非常感谢我的angel master!

之路 — Thu, 24 Dec 2009 12:17:12 +0000

非常感谢我的angel master!

收到你的礼物和祝福，相当的开心与感动！

也把我的祝福送给你吧，一生快乐！我的angel master!