CSS+DIVweb排版的定义及常见的浏览器兼容问题

  DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
 　尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：
　　第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。
　　第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
　　第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。
　　第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
   其中div+css中浏览器的兼容问题是有些设计师最头痛的事情，例如：Mozilla Firefox设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width。在排版时要注意就是哪些是哪个浏览器所专用的哪些在其他浏览器中不会出现效果，这样版面就会在各个浏览器中显示正常了。例如：所有浏览器 通用height: 100px;IE6 专用 _height: 100px;前者的使用的话在IE6 FF浏览器中测试内容多了就不会向下撑，内容就会给隐藏掉。后者在IE6里测试，在内容多的情况下它还是会显示出来，在IE其他的浏览器中测试也会显示内容。但是在FF中就会隐藏。
div+css样式IE与Firefox常见兼容问题：
  1、DOCTYPE 影响 CSS 处理
  2、FF：div 设置 margin-left， margin-right 为 auto 时已经居中，IE 不行
  3、FF: body 设置 text-align 时， div 需要设置 margin: auto(主要是 margin-left，margin-right) 方可居中
  4、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和width
  5、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 非凡设置样式
  6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
  7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
  8、FF: 链接加边框和背景色，需设置 display: block， 同时设置 float: left 保证不换行。参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格。
  9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
注重：这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以       在IE下其实解释成这样： div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写      margin:XXpx!important;
  11、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值所以先定义ul{margin:0;padding:0;} 就能解决大部分问题
div+css样式常见问题解决发法:
  1.margin加倍的问题。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的问题。解决方案是在这个div里面加上display:inline;
　2.关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很轻易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
　3.关于高度的问题假如是动态地添加内容，高度最好不要定义或者设置最小高度。浏览器可以自动伸缩，然而假如是静态的内容，高度最好定好，但是有个不好之处是容器内容多了过后容器不会随之撑长撑大。
　4.!important 的使用;假如实在没有办法解决一些细节问题，可以用这个方法.FF对于"!important"会自动优先解析，然而IE则会忽略，IE7会识别。