(转)提高网页在IE和Firefox上的兼容性——CSS Hack

目前，IE和Firefox是网页用户常用的浏览器。由于不同浏览器对CSS的支持和解析结果不同，同样的CSS代码有时会在不同的浏览器上显现出不同的网页效果。在IE上测试完成的网页，用Firefox打开却可能满篇混乱，表格错位了，文字间距不同了，代码功能也失效了，等等。

虽然网页开发人员以及所有程序开发人员都希望自己的代码具有强壮的可兼容性，同样的代码可以在任何位置正确运行，但是对于CSS，做的并不完美。这不是CSS的问题，兼容所有浏览器的解析器目前的确是件很难办到的事情。网页制作者是无法强迫用户只使用某一种浏览器的，只能通过对网页代码的控制，对标准CSS进行补救，尽量使同一个网页在不同的浏览器上都能呈现基本相同的外观和功能。在各种浏览器没有形成标准化开发前，恐怕还没有更完美的办法达成一致。

解决网页在不同浏览器上兼容性的方法通常是针对不同浏览器书写不同的CSS代码，并且精心组织HTML结构，使CSS代码能在不同浏览器中分别呈现基本类似的外观和功能。即便如此，目前也还是无法做到完美的一致外观。针对不同浏览器书写不同CSS代码的过程，就叫做CSS Hack。

下面举例说明怎样书写CSS Hack。

1. 这个例子控制网页背景在IE和Firefox中显示不同颜色。虽然实际网页很少这样制作，但这是体验CSS Hack控制能力的一个简单明了的好例子。

使某个网页背景，在IE6中显示蓝色，在IE7中显示绿色，在FireFox中显示黄色


注：
IE6可识别*，但无法识别!important
IE7可识别*，也可识别!important
Firefox无法识别*，但可识别!important


注：
IE6可识别*和下划线"_"
IE7可识别*，无法识别下划线"_"
Firefox无法识别*或下划线"_"

2. 这个例子控制网页页面宽度。使网页在IE中宽度为400px，在Firefox中宽度为700px


注：
IE可识别"+"
Firefox无法识别"+"

3. 这个例子控制网页页面高度。使网页在IE6中高度为50px，在IE7或IE6中高度为100px，在Firefox中高度为300px


注：
IE6可识别下划线"_"
IE6和IE7可识别*，IE7无法识别下划线"_"
Firefox无法识别"*或下划线"_"

还有更多CSS Hack例子，不一一列举。

虽然以上介绍了如何使用CSS Hack，但是CSS Hack并不是网页开发不可缺少的部分。恰恰相反，合理的设计网页构架，可以减少CSS Hack的使用，甚至避免CSS Hack的使用。CSS Hack可以被看作一种过渡时期的产物，网页设计开发不会也不应该停留在用CSS Hack解决浏览器兼容的层面上。技术的发展不会停止，目前学会这个补救措施只是权宜之计。