Firefox/Chrome…下的CSS Hack调试

这几天重写校会网站的html和CSS。发现Firefox和Safari貌似不支持margin-top和margin-bottom，奇怪的是margin-left、margin-right却都能正常显示页边空白。调试了很久，突然想起之前有位师兄貌似有对我提起过这件事，遂神至心灵，换用了padding，在Firefox和Safari上测试了一下，完美呈现。高兴之余，不忘又打开了IETester，用IE6测试了一下，发现边距神奇地变成了我所设定值的两倍有余，原因到底是什么，到现在还没弄清（如有高手知道内情，还请赐教）。思考良久，甚至觉得会不会是IETester的问题，如果换在真正的IE6上或许不会有这结果，可惜我装的是IE8，想在真正的IE6上测试，还是挺麻烦的，遂准备放弃。无意又打开了360安全浏览器，试了试，也发现了这问题。于是决定无论如何必须解决。

在网上盲目地搜索关键字“Firefox css标记”（因为这个问题最早是在Firefox上发现的，所以依照逐个消灭的战略，我决定先从Firefox上下手），看了几条，居然找到了CSS Hack，看来真是老天眷顾。认真看了看，发现我之前准备各个击破的战略很有先见之明，因为这显然是标准 CSS没办法兼容各浏览器显示效果的结果，这样子只能用CSS Hack(专属标记)来补救了。

因为使用margin-top标记的话，IE6和360安全浏览器都能正常显示，所以原有css标记还是采用margin-top，而针对Firefox和Safari，使用CSS Hack来解决问题，CSS代码是这么写的：

.right_pic {
margin-top:10px;
}
@-moz-document url-prefix() {
.right_pic {
padding-top:10px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.right_pic {
padding-top:10px;
}
}

其中right_pic是我需要使用的那个div的表示符。写完在Firefox和Safari上是测试了一下，完美呈现。（加记：写到这里发生了一件相当搞笑的事：突然想起我还没有安装Safari，那么前文怎么会有一个Safari呢？太诡异了！！忙查看了一下，搞笑的事发生了，原来我一直把我的谷歌浏览器(Google Chrome)当成了Safari，真是荒唐。然而这件荒唐的事却无意中给了我一个认识，原来Safari的CSS Hack（@media screen and (-webkit-min-device-pixel-ratio:0)）同样适用于Google Chrome，这也就是我到现在才发现我把Safari和chore搞混了的原因。但这是不是表示Google Chrome和Safari有相似的内核呢？我不知道，哈哈……）

OK，加记完搞笑的那件事，继续正文，话说我发现CSS Hack确实能使边距呈现正常，内心激动莫名，打开360安全浏览器和IETester在IE6下测试也均正常，更加欣喜……突然又想起了我还有一个IE8，出于不知什么原因（或许IE8生来就让人讨厌）这个浏览器一直出于冷宫状态，平时我几乎是不会用的。当然，为了测试页面，还是要用的，于是打开，同样的问题出现在了这个浏览器呈现的页面上，仔细又搜了搜，知道其实IE8的CSS Hack还是比较好写的，比如：

html > body .right_pic {
padding-top:10px;
}

试了试，ok，搞定！带着胜利者的心情审视了一下我的劳动结果，从Firefox、Google Chrome、IE6、IE8（IE7在我的IETester上莫名其妙地不能用，郁闷，希望它呈现的和IE8相差无几才好）都正常，最后打开360安全浏览器，本来的问题又出现了，边距是设定值的两倍……

在郁闷中思考了一下，觉得应该是360安全浏览器即兼容了IE6的内核，又兼容IE8的内核，所以html > body .right_pic在360安全浏览器上也有效，margin 10px加上padding的10px，结果就是外观上看起来的20px，比预期大了一倍。又在网上搜索了一番，发现针对IE还可以这么写：

<!--[if IE 7]>
<style type=""text/css"">
</style>
<![endif]-->
<!--[if IE 6]>
<style type=""text/css""></style>
<![endif]-->

当然，IE8的话把7改成8就可以了。居然搞定了，真是太神奇了。

总结一下：搞这么多，其实都是浏览器内核混乱的结果，如果Firefox、IE……不各自为政，大家坐下来谈出一个协议来，那写css就不至于这么辛苦了，而且为了兼容各浏览器，不得不写出很多冗余的代码，这大大降低了信息的传递效率而且与现时节约能源的观念显然是不符的。然而，反过来想了想，又觉得如果真的出一个协议来，那岂不是大家都能写css了，网页设计师到了那个时候是不是吃饭都困难？！或许真到了那时候，靠的就真的全是个人的美感和设计能力而不是代码编写能力了。

世界就是这样，有些很显然不适合存在于世的东西，却又有一定的存在的道理，这个道理每每牵涉到的是部分人的利益，从而使得那部分人不去消灭它，这件不适合存在的东西也就依旧存在了……

这就是世界……真实的世界……