浏览器的兼容性是越来越多的网页设计者要考虑的问题。现有的浏览器对CSS和DIV的兼容性并不是太好，纵使现在的设计者在进行编写时考虑各方面的问题。
我把自己在编写时碰到的一些问题及从网上找到的问题进行了总结。如果说的什么地方写的不合适或者说你有更好的方法请告知.
下面就是问题及解决方法：
1、对于DIV的垂直居中问题（vertical-align:middle;），对于一些新后来说对DIV的徒工直居中问题很烦脑，在样式中写了vertical-align:middle;在浏览器中显示的仍然没有居中，像这样的情况学者就会认为是自己样式哪写的不正确，或是少了某个代码。检查了一遍并没有什么问题，此时学者就会摸不着头脑了。现在大多数的CSS+DIV设计者会采用如些方法来解决这问题。
方法：
将行距增加到和整个DIV一样高（line-height:200px;）然后插入文字，在前台显示正常。唯一的缺点就是所控制的内容不要换行.
2、外边距（margin）加倍问题：
在为某个DIV设置了float属性时，在IE浏览器中margin的值会被子加倍。
方法：
在这个DIV的样式中写入display:inline;如：<div id="imfloat"></div>相应的样式(css)为#imfloat{float:left;margin:5px; display:inline;}
针对DIV浮动IE所产生的双倍距离问题，通常情况下会在样式中写入：display:inline;(使浮动忽略)。说到这我们想到了有关display的所有值.例如:block、inline、table等。它们有何区别，在这我简单的对他们描述下。
3、IE宽度和高度的问题：IE不认得min-这个定义，它把正常的width和height当作有min的情况来使，如此一来就会造成很多的问题，例如：只有宽度和高度，正常的浏览器里这两个值就不会变，IE下面根深蒂固本等于没有设置宽度和高度。如果说要设置背景图片，这个宽度就比较重要。方法：
#box{width:auto; height:auto; min-width:80px; min-height:35px;}
4、页面的最小宽度：
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，如此一来就能保证排版一直正确。但IE不认得这个，实际上它把width当做最小宽度来使，为了让这一命令在IE上也能用，可以往<body>标签中放入<div>然后给其指定一个类。CSS这样设计：#container{ min-width:600px; width:e-xpression(document.body.clientwidth<600? "600px" "auto">);}解释：第一个min-width是正常的；第二个width使用了javascript，这只有IE才认得，同时也会让你的HTML文档不太正规,它实际上通过javascript的判断来实现最小宽度。
5、DIV的浮动IE文本是生3象素的BUG
左边对象浮动，右边采用处补丁在左边距来定位,右边对象内的文本会离左边有3px的间距.
<style type="text/css">
#box{ float:left; width:1000px;}
#left{ float:left: width:50%; margin-right:-3px;}
#right{ width:50%;}
</style>
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
6、IE捉迷藏问题
当DIV应用复杂的时候每个栏中都存在一些链接时，DIV等这个时候容易发生捉迷藏问题：有些内容显示不出来 但内容确实在页面。我们可以采用line-height属性或使用固定高和宽，使页面的布局尽量简单.
7、float的DIV闭合:清除浮动:自适应高度
（1）对于N个FLOAT DIV的父层进行了属性设置并没有FLOAT属性，而当其子层DIV中的内容加多、高度加长时，父层的高度并不会随着改变。DIV学者都碰到过同样的问题。
如：
<div id="page">
<div id="left" style="float:left;"></div>
<div id="center" style="float:left;"></div>
<div id="right" style="float:left;"></div>
</div>
子DIV都设置了FLOAT属性,而父层没有设置。这样一来子层就脱离了父层从而产生当子层的高度拉长时而父层并没有任何的变化.特别是给父层设置了背景后视觉效果很明显 。针对这一问题我们可以采用以下方法:
在父层中再嵌套一层DIV将其设置为float代码如下:
<div id="page">
<div id="bg" style="float:left; width:100%;">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>
(2)万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
(3)高度不适应
指当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或padding时.
例：
<style type="text/css">
#box{ background-color:#ccc;}
#box p{margin-top:10px; margin-bottom:10px; text-align:center;}
</style>
<div id="box">
<p>内容</p>
</div>
解决方法：在P对象上下各加2个空的DIV对象将样式设置如下：
.d{ height:0px; overflow:hidden;}或者为其加上border属性.
8、在IE6中图片所产生的距离：
方法：1、将img设置为display:block;或者设置vertical-align属性为vertical-align:top(bottom\middle\text-bottom)都可以解决这样的问题.
13.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>
9、web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子 三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
10、 LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style>
11、为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>
12、为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
13、怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />
14、怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css"> <!-- div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style>
