div+css教程之常见的浏览器兼容问题及解决方法.docVIP

div+css教程之常见的浏览器兼容问题及解决方法 2012-09-18 21:03|作者:ahuing|分类: css技巧 在这之前先了解一css hack [IE8的css hack] [CSS兼容IE6,IE7,FIREFOX的一些收集] 1.图片下方出现几像素的空白间隙 问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 divimg 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。例 如：divimg style=float: left; src=/摘要摘要摘要摘要/div,图片和文字就会出现3像素 解决方法：方法一，两个元素都浮动，如：divimg style=float: left; src=/span style=float: left;摘要摘要摘要摘要/span/div;方法二，这种设计时一般图片和文字要有间隙的，做个ie6的 hack就行,如：divimg style=float: left; src=/span style=margin-right: 5px; _margin-right: 2px;摘要摘要摘要摘要/span/div 4.li在IE中底部空行 问题说明：当li里面有两个以上的浮动元素时，li的下面就会产生一条空白间隙，例如  ul class=tlist lispan style=float: left;栏目/spana style=float: left; href=# target=_blank标题标题标题/a/li /ul 解决方法：这个问题和第一个问题很相似，解决方法也是一样，在li上加个垂直方向的属性，例如： ul class=tlist li style=vertical-align: top;span style=float: left;栏目/spana 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 貌似不会出现失效的情况。 6.IE6出现重复字符(文字溢出) 问题说明：一个容器包含2两个具有“float”样式的子容器，第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3，在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。例如下列代码： !DOCTYPE html PUBLIC -//W3C//liD XHTML 1.0 Transitional//EN /TR/xhtml1/liD/xhtml1-transitional.lid html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gbk / title标题