FF、IE7、IE6的CSS hack问题

最近在仿一套我认为非常经典的皮肤，这套皮肤是一套非常具有立体感的皮肤，我第一眼看到他之后就非常的喜欢，很想把它弄到PJBlog上来，策划了好几天，他的机构有些特别，对于背景的定义应该说得有5个，顶部2个，底部2个，中间背景。

首先得考虑PJBlog对于这些背景的定义，安排了很久，终于基本合理的安排了背景的定义。

为什么背景难定义呢？首先，图片的repeat问题，顶部和底部都有，顶部图片，底部图片，中间背景。

repeat与fixed属性的不同，这个很简单，自己试验一样就知道了，相对运动与相对静止。

言归正传，还是说FF、IE7、IE6的CSS hack问题。(标准标准，什么是标准？)

应为这套皮肤对于定位有着严格的要求，歪一点点都不行，所以不得不用到一些CSS Hack来解决。

1、!important

IE7和FF下都支持!important 的，可以用!important来区分FF、IE7和IE6的高度。

.content{background:#f00;height:100px !important;}/* FF+IE7 */

.content{background:#f00;height:200px;}/* IE6 */

2、IE6/IE7对FireFox

*+html 与 *html 是IE特有的标签， firefox 暂不支持。而*+html 又为 IE7特有标签，IE6暂不支持。

.content{background:#f00;height:100px;}/* FF */

*html .content{background:#f00;height:200px;}/* IE6 */

*+html .content{background:#f00;height:300px;}/* IE7 */

height:50px; /*FF*/

*height:100px; /*For IE7 & IE6*/

_height:150px; /*For IE6*/

同样可以用相同的原理来为IE6、IE7、FF设置不同的width,height,margin,padding等属性。

3、区别不同浏览器，Css hack写法：

区别IE6与FF：

background:orange; *background:blue;

区别IE6与IE7：

background:green !important; background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange; *background:green !important; *background:blue;

还有就是使用时的排序问题，我认为：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

增加IE8的CSS Hack IE6，IE7，IE8，Firefox css hack对照表

皮肤抢先预览，此皮暂时只在IE7，IE8，FireFox完美呈现，IE6有点小问题，还在研究中！ 想看原来的网站么，请点这里~