div+css常见浏览器兼容问题以及解决办法
1.图片下方出现几像素的空白间隙
问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 <div><img
src=""/></div>这个图片下面会有一条空白间隙，
解决方法：给图上一个垂直方向的属性如:vertical-align:
top(任意一个就行middle);这个问题从而延伸到，object(视频)和textarea在火狐下也会出现类似的问题，解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align:
top;}
2.IE6双倍margin的BUG(双边距)
问题说明：这是ie6一个著名的bug，当一个元素向一边浮动时，其它同一个方向如果有margin的话，ie6就会产生双倍的margin。例如：<div
style="float: left;margin-left:
10px;"></div>在ie6下显示会有margin-left:20px的距离
解决方法：加个_display:inline:属性，例如<div
style="float: left;margin-left: 10px;_display:
inline;"></div>
3.ie6下的浮动元素和非浮动元素间出现3像素BUG
问题说明：这也是ie6一个著名的bug,当一个元素浮动时，同级别的文字没有浮动，在ie6下它们之间就会产生3个像素的bug。例如：<div><img
src=""/>摘要摘要摘要摘要</div>,图片和文字就会出现3像素
解决方法：方法一，两个元素都浮动，如：<div><img
src=""/><span style="float:
left;">摘要摘要摘要摘要</span></div>;方法二，这种设计时一般图片和文字要有间隙的，做个ie6的hack就行,如：<div><img
src=""/><span style="margin-right: 5px;
_margin-right:
2px;">摘要摘要摘要摘要</span></div>
4.li在IE中底部空行
问题说明：当li里面有两个以上的浮动元素时，li的下面就会产生一条空白间隙，例如
<ul
class="tlist">
<li><span style="float:
left;">栏目</span><a href="#"
target="_blank">标题标题标题</a></li>
</ul>
解决方法：这个问题和第一个问题很相似，解决方法也是一样，在li上加个垂直方向的属性，例如：
<ul
class="tlist">
<li ><span
>栏目</span><a href="#"
target="_blank">标题标题标题</a></li>
</ul>
5.IE6样式中文注释后引发失效
问题说明：这是ie6
出现的奇怪现象。这是由于css 和html 的编码不同所引致,满足下面条件就会引起注释下面的样式不起作用：
1). css有中文注释
2).
css为ANSI编码
3). html为utf-8编码
解决方法：
1).
去掉中文注释，用英文注释或者多打几个“*”，这是ahuing在之前的教程里提到的，例如： /*** 注释 ***/
2). 统一css 和 html
的编码
建议采用第二种解决方法。ps： css为uft-8 html 为ANSI
貌似不会出现失效的情况。
6.IE6出现重复字符(文字溢出)
问题说明：一个容器包含2两个具有“float”样式的子容器，第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3，在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。例如下列代码：
<!DOCTYPE
html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gbk"
/>
<title>标题</title>
<style>
*{margin:
0;padding: 0;font-size: 12px;}
.a{width:205px;}
.b{float: left;width:
50px; background: black;color: #fff;margin-right: 5px;overflow:
hidden;}
.c{float: left;width: 150px;background:
red;}
</style>
</head>
<body>
<div
class="a">
<div
class="b">测试测试测试测试测试测试测试111111111111</div>
<!-- 注释
-->
<div
class="c">测试测试测试测试测试测试测试2222222222</div>
</div>
</body>
</html>
解决方法：
为何会出现重复文字，谁也没说清楚，包括官方，这个问题，ahuing只在给朋友调试样式时见过，自己写的代码没见过，所以认识这个bug有点晚，ahuing个人认为，ie6将注释也当成内容存在。
如何消灭重复文字，只要让上面任何一个条件不满足即可，
改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
1).减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3。
2).去掉所有的注释。
3).在第二个容器后面加一个或者多个<div
></div>来解决。
4).给溢出文字的标签加position: relative;属性
6.png图片在IE6下出现透明或背景变灰的bug;
问题说明：这里的png图片是指32位和24位的，8位的png图片透明ie6是支持的。
解决方法：
1)使用滤镜，语法如下
.image-style
{ background-image:
none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png",
sizingMethod="scale");
}
注意：使用滤镜需要损耗性能。
2)给IE6单独制作一张.gif图片(或者8位的png图片)，打上hack
.image-style{
background:transparent url("filename.png") no-repeat scroll 0
0;_background-image:url("filename.gif");
}
这种方法只需要在切图时多存储一份.gif格式的图片，一般采用这种方法。
7.让position:absolute弹出层在flash上面
<object class>&nbps;</div>
