代码改变世界

IE的2像素偏差问题终于“将要”成为历史了(附js微技巧一则)

2010-08-24 15:24  Nana's Lich  阅读(3314)  评论(4编辑  收藏  举报

众所周知,IE有一个经典的“差了2像素”的问题,现在在IE9的第四个平台预览中这个问题已经可以解决了!

不过有一个前提是,你必须“IE9标准模式”打开网页才行,默认情况下如果一个网页的DTD是“<!DOCTYPE html>”,“IE9标准模式”就会启用。

 

好吧,IE的“2像素”偏差主要是来自于那个浏览器显示区域的那个鸡肋的“内陷”边框,正好2像素宽。有意思的是刚才我跟一个朋友提起这件事他居然大惊“原来是历史遗留问题么”XD

其实在从这个2像素偏差的问题刚引起广泛关注的时候,就有一些人注意到把body的边框干掉就没问题了。

可是从IE6到IE8一直有一个问题就是标准模式下body的边框并不是浏览器内容区的边框,而是另有所指,当时还有一些其它方面的原因综合在一起,都是阻碍了Web标准化进程的因素——从这个角度来说,IE真是罪该万死。

补充:经3楼“司徒拔's Paradise”提醒后,我发现在IE6中可以通过为html元素设置css边框规则来消除这个多余的凹陷边框;但在IE8中仍然不行(手头没有IE7暂时没法测试)。

 

而现在IE9的新“IE9标准模式”(真拗口)会干脆不显示这个边框,于是这个2像素偏差的问题也就解决了。

有些人可能早就注意到在“IE9标准模式”中那个内陷边框已经被干掉了,但是看起来在IEBlog特别提起这件事之前很多人还没发现2像素的问题已经解决了呢。我也没发现XD

 


 

在前两天的一些讨论中有人提到了使用闭包来确保代码的完整性——虽然当时有些偏题,但我自己也是很喜欢这个技巧的。

我习惯的写法和常见的写法稍微有一点差别,但那只是一两个字符的差别,所以我也一直不觉得有什么必要特意去提。

鉴于这篇博文只说“2像素”的问题字数实在太少,就在这里把这个技巧也提一下吧。

 

单纯以创建作用域为目的的保护性的闭包,一般来说是写成这样的:

(function(){
  /* ... */
})();

由于以function关键字开头的语句会被一些JavaScript引擎当作函数声明,所以在这个“看起来像是声明”两边加上括号表示“这是一个函数表达式”让它能够正常工作。

但是增加一对括号两个字符的做法总让我觉得不太舒服,所以经过一些小小的摸索之后我开始采用这种写法:

!function(){
  /* ... */
}();

少了一个字符之后,我觉得舒服多了,虽然本质上说只是减少了一个字符而已,实际运行起来还要因为多一个逻辑运算而多耗费一点时间——不过我想对于一个包含了大量代码内容的闭包来说多一个逻辑否并不会有太大影响,就一直这样用了。

当然啦,你可能并不同意我的看法,而采用较为谨慎的括号写法。

 

也许有人会对这个“!”感到困惑,比方说“函数的逻辑否不应该是false吗”?

其实跟采用括号的原因一样,这里用了感叹号只是想告诉解释器“这里是一个函数表达式,不是一个函数声明语句”;

而“!”的操作优先级也是低于“()”这个表示“执行”的操作符的。

 

在ECMAScript中,操作优先级最高的是“关系操作(运算)符”,也就是表示成员的“.”、“[]”和表示执行的“()”,接着才是“一元操作(运算)符”,包括表示逻辑否的“!”在内。

所以,就算是把“!”写在开头,也不会影响到后面函数的执行。