webdev
著名的IE6 double margin bug
by hustcom on Dec.16, 2008, under webdev
同样在IE5和IE5.5上也能重现的bug,就是到一个元素float方向和margin方向相同的时候,margin会加倍。
比如一下元素:
<div class”left” />
它的样式:
.left
{
float: left;
margin-left: 10px;
}
在IE6下,你会发现这个margin其实占据了20px。
原因就是这是浏览器的bug,解决方案也很多,我这里举几条:
- 加”display:inline”的style: 在元素float后,display属性随之无效,所以你可以大胆地加上这个属性;
- 绕道行之:换用padding,或调换父级子级间距关系等方式避免正面遇到这个bug;
- CSS hack:不推荐,不告知。
麻烦的名叫MSNMessenger.Hotmail2Control的ActiveX对象
by hustcom on Nov.21, 2008, under browsers, site, webdev
www.msn.com上的navigation里有一个Messenger的小link,如果你已登录了MSN Messenger,当你在IE下点击这个link的时候,你的MSN Messenger便会激活并置于页面前端,很无聊的一个功能吧。
具体实现起来也很简单,安装MSN Messenger的时候,你的注册表就被动了手脚,所以可以用很简单的JS就可以实现调用,具体JavaScript代码如下:
var messengerObj = new ActiveXObject(“MSNMessenger.Hotmail2Control”);
messengerObj.ShowContactList();
但是,事情往往没有那么简单。你在www.msn.com的页面上可以通过fiddler改它的HTML,让其他link也有同样的JS调用,而且功能可以正常实现,但在其他页面上,就实现不了这个功能了。
为什么?准确的答案不知道,但可以肯定的是,domain server被做了手脚,非msn的网站想实现这个功能,没门。。。
未完待续。。。
如何生成半透明层
by hustcom on Nov.19, 2008, under webdev
如同下图:

这里其实包含3层:底部slideshow,中部半透明的黑色mask层,上面的logo和按钮层。
这里谈到的就是如何实现中部的黑色mask层。
有人说到用图片,ok,GIF是不支持半透明的,PNG在IE6以及其以下版本的IE上不能使用透明效果。所以用图片是难以较好实现的。
所以还是得借助CSS里的滤镜。
这时,有人会提到直接写到CSS文件里,这样的问题是该CSS文件不能通过W3C认证。
因此只有一个办法,用JS去加载inline的CSS,具体代码如下:
tmp.style.opacity = 0.5;
tmp.style.filter = “alpha(opacity=50)”;
这样的效果是兼容各主流浏览器的,包括IE5这样的老不死浏览器。
