问题的差别在于容器的整体宽度
有没有将边框（border）的宽度算在其内,这里IE6 解释为200PX ,而FF 则解释为220PX,那
究竟是怎么导致的问题呢？大家把容器顶部的xml 去掉就会发现原来问题出在这,顶部的申
明触发了IE 的qurks mode,关于qurks mode、standards mode 的相关知识,请参考:http:
//www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true
IE6,IE7,FF IE7.0 出来了，对CSS 的支持又有新问题。浏览器多了，网页兼容性更差了，
疲于奔命的还是我们，为解决IE7.0 的兼容问题，找来了下面这篇文章： 现在我大部分都
是用!important 来hack，对于ie6 和firefox 测试可以正常显示，但是ie7 对!important 可以正
确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.
第一种，是CSS HACK 的方法height:20px; /*For Firefox*/ *height:25px; /*For IE7 &
IE6*/ _height:20px; /*For IE6*/ 注意顺序。这样也属于CSS HACK，不过没有上
面这样简洁。#example { color: #333; } /* Moz */ * html #example { color: #666; } /*
IE6 */ *+html #example { color: #999; } /* IE7 */

type="text/css" href="ie.css" />
第三种，css filter 的办法，以下为经典从国外网站翻译过来的。. 新建一个css 样式如下：
#item { width: 200px; height: 200px; background: red; }
新建一个div,并使用前面定义的css 的样式： 在
body 表现这里加入lang 属性,中文为zh： 现在对div 元素再定义
一个样式： *:lang(en) #item{ background:green !important; } 这样做是
为了用!important 覆盖原来的css 样式,由于:lang 选择器ie7.0 并不支持,所以对这句话不会有
任何作用,于是也达到了ie6.0 下同样的效果,但是很不幸地的是,safari 同样不支持此属性,所
以需要加入以下css 样式： #item:empty { background:
green !important } :empty 选择器为css3 的规范,尽管safari 并不支持此规范,但是还
是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie 各版本以外的浏览器上。
对IE6 和FF 的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较
好。
div+css 网站布局设计常见错误大全
div+css 是网站设计标准（或称“WEB 标准”）中常用的术语之一，通常为了说明与HTML
网页设计语言中的表格（table）定位方式的区别，因为XHTML 网站设计标准中，不再使用
表格定位技术，而是采用css+div 的方式实现各种定位。应用应用DIV+CSS 编码时很容易
犯一些错误。本文列举了一些常见的错误：
1. 检查HTML 元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错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。
DIV CSS 完美兼容IE6/IE7/FF 的通用方法
关于CSS 对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没
有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7 对!important 的支持, !important 方法现在只针对IE6 的HACK.(注意写法.记得该声
明位置需要提前.)
以下为引用的内容：

2, IE6/IE77 对FireFox
以下为引用的内容：
*+html 与*html 是IE 特有的标签, firefox 暂不支持.而*+html 又为IE7 特有标签.

注意:
*+html 对IE7 的HACK 必须保证HTML 顶部有如下声明：
"http://www.w3.org/TR/html4/loose.dtd">
二、万能float 闭合
关于clear float 的原理可参见[How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div 加上class="clearfix" 即可,屡试不爽.
以下为引用的内容：

三、其他兼容技巧
1, FF 下给div 设置padding 后会导致width 和height 增加, 但IE 不会.(可用!important
解决)
2, 居中问题.
1).垂直居中.将line-height 设置为当前div 相同的高度, 再通过vertical-align: middle.( 注
意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给a 标签内内容加上样式, 需要设置display: block;(常见于导航标签)
4, FF 和IE 对BOX 理解的差异导致相差2px 的还有设为float 的div 在ie 下margin 加
倍等问题.
5, ul 标签在FF 下面默认有list-style 和padding . 最好事先声明, 以避免不必要的麻烦.
(常见于导航标签和内容列表)
6, 作为外部wrapper 的div 不要定死高度, 最好还加上overflow: hidden.以达到高度自适
应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于IE.
1 针对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。
2 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; 就可以了。
3 盒模型不同解释
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie 产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE 会产生200px 的距离
display:inline; //使浮动忽略}
这里细说一下block,inline 两个元素,Block 元素的特点是:总是在新行上开始,高度,宽度,行高,
边距都可以控制(块元素);Inline 元素的特点是:和其他元素在同一行上,...不可控制(内嵌元
素);
#box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效
果diplay:table;
IE 不认得min-这个定义，但实际上它把正常的width 和height 当作有min 的情况来使。这
样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width 和min-height 的话，IE 下面根本等
于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px;
min-height: 35px;}
6 页面的最小宽度
min-width 是个非常方便的CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能
保证排版一直正确。但IE 不认得这个，
而它实际上把width 当做最小宽度来使。为了让这一命令在IE 上也能用，可以把一个