作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。
今天，趁着想完善公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。
同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。
..
人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。
在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：
这几天调试PHP时,遇见一个比较怪异的问题，对病症简单描述如下：
问题病症1：页面在IE7下刚加载时显示正常，但在点击一个链接后，新页面并没有加载css，只有手动刷新一次才能正常。
问题病症2：在浏览器顶端和页面内容之间有一个空格，在IE7和IE6下存在，在FF中并没有
解决方案1：在调用css样式的代码前加空的script标签对可解决问题1，但是因为没有根本性的解决问题，所以无法解决问题2。
解决方案2：用UltraEdit软件打开代码文件，（一般是包含的公用头文件），切换到16进制编码模式下，然后保存文件为无BOM格式，该方法为治本的良方,推荐之。
对了，问题就出在它身上，Unicode规范中有一个BOM的概念。BOM——Byte Order Mark，就是字节序标记。
GOOGLE一下BOM的说明：在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符，它的编码是FEFF。而FEFF在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符”ZERO WIDTH NO-BREAK SPACE”。这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little- Endian的。因此字符”ZERO WIDTH NO-BREAK SPACE”又被称作BOM。
UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符”ZERO WIDTH NO-BREAK SPACE”的UTF-8编码是EF BB BF。所以如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。Windows就是使用BOM来标记文本文件的编码方式的。
UTF-8编码的文件中，BOM占三个字节。如果用记事本把一个文本文件另存为UTF-8编码方式的话，用UE打开这个文件，切换到十六进制编辑状态就可以看到开头的FFFE了。
现在在含有图片较多的页面上，我们会以缩略图的形式展示图片，当用户将鼠标移动到缩略图上时，我们就会按原图大小显示出来。这种应用已经很普遍，尤其在商品展示和用户头像场景中。
写之前发现网上的都不是很理想，兼容性一般。再看了《超越CSS》之后，觉得上面的想法不错，这次和大家分享一下。大致思路就是：通过绝对定位把缩略图图排列好，然后通过css的hover伪类属性来实现图片尺寸放大。具体如下：
CSS文件如下：
Html文件如下：
鼠标移上去之后实现了图片放大，其中要注意的是IE6的hover属性，
IE6处理CSS伪类:hover存在一个Bug.就是一旦 a与 a:hover 的CSS属性是一样的，也就是说a:hover中没有任何样式的改变，hover状态就不会被触发。但是只要在a:hover增加某些特定的属性变化，本例中是“border:none;”，就可以触发这个事件了。这里的特定属性有：direction/text-align/text-indent/float/overflow/position，但是font属性无效。
..
