[原创]JavaScript 与 CSS 兼容 Firefox 的几点总结

最近做了一个页面,要求点击链接时,能够弹出一个popup,要用DIV来实现, 层里的内容很多时要能够滚动, 层的位置要根据鼠标点击的不同而不同. 经过几天的努力, 克服了N多困难总算完工了. 这其中遇到的最大最多的困难就是协调不同浏览器的差异. 让IE6, IE7, FF尽量地表现一致. 现在将这几天学到的东西记下来, 可以让遇到同样问题的人少走弯路, 也方便自己以后查询.

点击链接显示一个popup比较简单, 你只要先写好一个DIV, 把它隐藏了, 等点击的时候再设置display = 'block' 就行了. 这个比较简单,我就不再多说了, 大家可以到网上搜一下,有很多实例.

我这里需要说的是如何让两个DIV共享一个ID. 我这个popup的样式是别人已经定义好的,我不能改动.而且他是用CSS #popup { .... } 这样的定义的. 这样的话, 只能有一个DIV使用这个样式. 偏偏客户要求有两个链接都可以弹出popup, 而且内容要求不一样.

经过一番苦苦思索之后, 终于想到了一个解决办法. 就是先写两个隐藏的DIV, ID分别为 "popup1" 和 "popup2". 然后把这个唯一的ID "popup" 当做一个互斥的共享资源, 只有当这个DIV显示出来时,才指定ID为"popup", 当这个DIV隐藏时, 就把ID改成 "popup1" 或者 "popup2". 当点击一个链接的时候,就把别一个链接对应的DIV隐藏, 并释放共享ID. 供当前链接对应的DIV使用.

共享ID的问题解决了,下面说怎么让它实现滚动. 为了实现滚动,我自己写了一个CSS类:

.scrollable {
height:200px;
_width:385px;
margin-right:15px;
overflow:scroll;
overflow-x:hidden;
}

定义高度是为了不让DIV随着内容的增加而变长.  

定义 "_width" 是为了对付IE6, 因为在IE6里, 滚动条离边框很远, 不得不通过定义宽度来让它靠边儿.

定义 "margin-right:15px" 是为了对付IE7和FF, 因为在IE7和FF里,滚动条会跑到边框外面去, 通过右边距来让它回到边框里, 并有5px左右的空白.

overflow:scroll 是保证内容溢出时会出现滚动条

overflow-x:hidden 是隐藏横向滚动条, 只保留纵向滚动条.

这里我没有直接写 "overflow-y: scroll" 是为了兼容Opera浏览器. 因为Opera浏览器不认识 overflow-x  和 overflow-y. 先写上 overflow: scroll 就能保证至少用户可以看到全部的内容. 但是我没有找到如何隐藏Opera下的横向滚动条. 希望知道朋友指点一下.

接下来要做的就是让popup根据鼠标点击出现在不同的位置. 这个时候遇到一个很大的难题就是firefox总是出现 "event is not defined". 在国内论坛上我没有找到好的解决方法, 在一个国外论坛上找到了我想要的代码.

原文地址: http://www.thescripts.com/forum/thread428784.html

var element;
//Firefox
if(document.getElementById
&& (element = document.getElementById('id1'))
&& element.addEventListener)
{
element.addEventListener('mousedown', function(event) {
click(sMenu, event);
}, false);
}else{ //IE

document.getElementById("id").οnmοusedοwn= new Function("click(sMenu, event);");

}

if 是针对firefox的, else是针对IE的, IE下还有很多其它的方法也好使. 感觉就是在IE下怎么写怎么好用, 但是在Firefox 下怎么写怎么不好用.

本来还想把这个popup做成可拖动的, 但是今天没有时间了, 改天再说吧.