visibility和display的区别

以前没怎么注意，以为visibility和display只是用法不同，效果是一样的，直到遇着一个问题，并真正认真去琢磨，才认识到这两者的差异。

很久以前，我利用visibility做了个下拉菜单，当时可能菜单还比较短，反正当时没发现有啥问题，用着挺好的。另外，这也和它在IE中的正常表现有关，因为公司里同事们在工作时基本上都是用ie，即使用其它浏览器，发现有问题，也会直接就换成ie，而一般都不会向我反应，而自觉把责任归到自己的电脑，所以，很遗憾，问题出现很久了，都没有被发现。

问题的表现是这样的：页面的上方是导航菜单，有利用javacript和visibility做的下拉菜单，菜单的下面是一些图片或文字的链接，比如国内新闻热点，会发现上半部分链接看起来似乎无效，就是鼠标放上去不会变成手，点击也没反应，下半部分则正常。这个现象比较奇怪，我猜测或许是中间有些标志缺失了。注意这个问题在IE下是不会出现的，只在chrome或firefox下会显现出来，所以，我会想到是这些浏览器要求比较严，比较遵守标准，一点小错误都不会放过的。所以，我把重点放在检查页面中的标识符，看看有没有拼写错误或漏掉的。很遗憾，找了半天也找不到，这中间其实挺费功夫的，我得一块块屏蔽代码，以缩小范围。测来测去我发现一个情况，就是刚好在下拉菜单到达的高度以下没事儿，以上的链接就无效，看来像是被一双无形的手挡住了。这时我才关注到visibility的用法。

原来，visibility的属性设为hidden时，依然会在页面中占据它的位置，而display则不同，当其设为none时，页面中就真的没它了。所以，我以前的下拉菜单用的是this.style.visibility='hidden'，虽然是看不到了，但只是隐形了，其实还在那儿，挡住了后面的东西，就像玻璃。然后，我改成用display的none属性，果然，玻璃没有了。

另外，以前学JQuery一直学不会，放了一段时间，这回试着改用JQuery重写这段javascript，发现有新的认识。再者，用框架有个好处，对于浏览器的兼容问题可以少费不少脑子，因为框架基本上都已经考虑的比较周全了。