CSS各个浏览器Hack的写法

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。

1, IE条件注释法，微软官方推荐的hack方式。

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器上显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器上显示
<![endif]-->

只在IE6以上版本生效
<!--[if gt IE 6]>
这段文字只在IE6以上版本IE浏览器上显示
<![endif]-->

只在IE7上不生效
<!--[if ! IE 7]>
这段文字在非IE7浏览器上显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]><!-->
这段文字只在非IE浏览器上显示
<!--<![endif]-->

2.综合一下常用的CSS Hack代码 

.csshack{
background:blue;
background:blue\9; /*all ie*/
background:blue\0/; /*ie8-ie9*/
background/*\**/: blue\9; /* ie7-ie8*/
*background:blue;/* or #background: blue */ /*ie6-ie7*/
+background:blue; /*ie7*/
_background:blue; /*ie6*/
}

网站如何同时兼容IE6、IE7、IE8

第一招：给常用CSS规定属性值。

[html] view
plain copy

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}  

img{border:0px;}  

ul {margin:0px;padding:0px;}/  

ul li {list-style:none;}  

上面的建站常用代码就相是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页

第二招：IE和FF下对象居中问题

IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示。

但是这样的方法在FF不行的。这里就需要给修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距离为0像素，左右为自动。所以FF就会居

中显示。

第三招：垂直居中（仅只用于一行）

比如说一个高30px的div，问题默认是会显示在左上角，如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则在修改line-height:30px;

数值越大越局下，为了防止撑破层，还需要再给一个样式overflow:hidden;(超出的部分不显示)

第四招：给每一个块对象设置三个样式

width:**px;height:**px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题。

第五招：针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到)

原来建设网站经常使用!important来设置优先权，但有了IE7之后就不行了。下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法

[html] view
plain copy

#1 { color: #333; } /* FF环境 */   

* html #1 { color: #666; } /* IE6环境 */   

*+html #1 { color: #999; } /* IE7环境 */   

上面的书写顺序一定不能去改变。

这样子网页在FF下显示#333，IE6下显示#666，IE7下显示#999