DIV＋CSS的实质是：使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离。
什么是浏览器HACK：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常。
因此，在网站设计的时候，应该注意css样式在不同浏览器下的兼容性问题，特别是对完全使用DIV+CSS设计的网站，就应该更注意IE6、 IE7以及FF对CSS样式的兼容，不然，你的网页可能出现意料之外的效果。
一、区别不同浏览器的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;
⑤ 区别FF，IE7，IE6（二）：
background:orange;*background:green;_background:blue;
下面简单解释一下各浏览器怎样理解这三个属性：
在FF下，第2、3个属性FF不认识，所以它读的是 background:orange; 。
在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *background:green; 。
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是_background:blue; 。
注：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持_（下划线），IE7和firefox均不支持_（下划线）。
|
| IE6 | IE7 | FF |
| * | √ | √ | × |
| !important | × | √ | √ |
| _ | √ | × | × |
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
⑥ 区别FF，IE7，IE6（三）：
*+html 与 *html 是IE特有的标签, firefox 暂不支持.
而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、CSS定义需要注意的问题：
1.检查HTML元素(如:<ul>、<div>)、属性(如:class=”")是否有拼写错误、是否忘记结束标记(如:<br />)
因为Xhtml 语法比较严格，诸如Firefox 之类的浏览器如果检查发现Xhtml里面有语法错误，那页面是不能正常显示的。即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的着名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三、CSS简写用法说明：
简单的说，css简写就是在等效的前提下，把多句css代码简化成一句。在我看来，简写css的好处有三：一是写起来方便（就像键盘快捷键）；二是简化代码；三是帮助你熟悉和深刻理解css。
能够简写的css属性主要有以下几个：
font
简写：
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值。
background
简写：
background:#fff url(bg.gif) no-repeat fixed left top;
等效于：
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
顺序：background-color | background-image | background-repeat | background-attachment | background-position
margin & padding
简写：
margin:1px 0 2em -20px;
等效于：
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;
顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border
简写：
border:1px solid #000;
等效于：
border-width:1px;
border-style:solid;
border-color:#000;
顺序：border-width | border-style | border-color
这三句也是简写，等于是把四边的样式合而为一了。（关于四边的问题，下文有详细说明）
border-top / border-right / border-bottom / border-left
简写：
border-top:1px solid #000;
等效于：
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
（和border一样）
list-style
简写：
list-style:square outside url(bullet.gif);
等效于：
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
顺序：list-style-type | list-style-position | list-style-image
关于四边
有很多样式都涉及到了四边的问题，这里统一说明。
四边的简写一般如下：
padding:1px 2px 3px 4px;
等效于：
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
顺序：top | right | bottom | left
不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”（顺时针方向）。
如果四边的值省略一个，只写三个：
padding:1px 2px 3px;
则等效于：
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
（省略的“左”值等于“右”）
如果四边的值省略两个：
padding:1px 2px;
则等效于：
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
（省略的“下”值等于“上”）
如果只有一个值：
padding:1px;
则等效于：
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
