css div的浏览器兼容问题要注意哪些

css div的浏览器兼容问题要注意哪些

1.图片下方出现几像素的空白间隙

问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙，

解决方法：给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到，object(视频)和textarea在火狐下也会出现类似的问题，解决方法一样。

object,textarea,img{vertical-align: top;}

2.IE6双倍margin的BUG(双边距)

（推荐学习：HTML视频教程）

问题说明：这是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 style="float: left;" src=""/>摘要摘要摘要摘要</div>,图片和文字就会出现3像素

解决方法：方法一，两个元素都浮动，如：

<div>
    <img style="float: left;" src=""/>
    <span style="float: left;">摘要摘要摘要摘要</span>
</div>;

方法二，这种设计时一般图片和文字要有间隙的，做个ie6的hack就行,如：

<div>
    <img style="float: left;" 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 style="float: left;" href="#" target="_blank">标题标题标题</a>
</li>
</ul>

解决方法：这个问题和第一个问题很相似，解决方法也是一样，在li上加个垂直方向的属性，例如：

<ul class="tlist">
    <li style="vertical-align: top;"><span style="float: left;">栏目</span>
   <a style="float: left;" 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

貌似不会出现失效的情况。

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！

以上就是css div的浏览器兼容问题要注意哪些的详细内容，更多请关注0133技术站其它相关文章！