CSS hack写法

书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。

color:red;//所有浏览器

color:blue\9;//所有IE

+color:orange;//IE7

_color:green;//IE6

color:green\0;  //IE8

若浏览器为FireFox，那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。

IE6识别 * 、_

IE7识别 * 、+

IE8识别 * 、/9

FF什么都不识别

Chrome CSS Hack

<style type=”text/css”>
<!–
@media screen and (-webkit-min-device-pixel-ratio:0)
{
body {
background-color: red; background-color:#33FF00\9;
}
}
–>
</style>

1.实现最小宽度min-width

标准浏览器和ie7+用:min-width:1008px;

这样在实现自适应布局时可以保证布局不小于一定宽度，同时宽屏或窄屏窗口被用户拖窄后不会出现布局自动换行。

对于Ie6以下模拟实现用的css表达式:

_width:expression((documentElement.clientWidth < 1008) ? “1008px” : “auto” );

2.最大宽度max-width

标准浏览器和ie7+用:max-width:600px;

实际中可以对布局元素如divOut{width:100%;max-width:1008px;margin:0 auto;}这样在宽屏里让他不大于1008px宽，但这里我们允许窗口尺寸变小时可以自适应。

还有比如文章页中，对图片显示img{max-width:600px;}我们保证图片不要大于我们的文章内容容器宽度100px宽，以免图片显示不完整。

对于Ie6以下模拟实现用的css表达式:

_width:expression((documentElement.clientWidth >600) ? “600px” : “auto” );

IE6下子元素float时父元素高度的问题：http://bbs.blueidea.com/thread-3010051-1-1.html

.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { zoom:1; }

ie6 developer toolbar

ie6 中的overflow:scrol时，父元素要设置 成 position:relative。