什么是CSS Hack

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

css hack 从字面意思来看，css 大家都熟悉，是前端中样式代码，负责控制网页的样式和布局，

那么hack呢？顾名思义是修改的意思 hack在软件系统中意思翻译为：基于程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。

结合起来解释就是，在前端不同的浏览器对CSS的解析不同，会导致生成的页面效果不同，这时候需要编写额外代码兼容所有浏览器，这个编写过程叫做hack。

各游览器常用兼容标记一览表:

解决问题

针对firefox ie6 ie7的css样式 

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针 对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。  现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */ 
* html #1 { color: #666; } /* IE6 */ 
*+html #1 { color: #999; } /* IE7 */ 
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

css布局中的居中问题 

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 

说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

盒模型不同解释

#box{ 
    width:600px; //for ie6.0- width:500px; //for ff+ie6.0
}
#box{ 
    width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-
}

页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

#container{ 
    min-width: 600px; 
    width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

.hackbox{ 
    display:table; //将对象作为块元素级的表格显示
}
// 或者
.hackbox{ 
    clear:both;
}

#box:after{ 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}