html div+css 常见的浏览器兼容问题及解决方法(很全).doc

div+css教程之常见的浏览器兼容问题及解决方法1.图片下方出现几像素的空白间隙问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 这个图片下面会有一条空白间隙，解决方法：给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到，object(视频)和textarea在火狐下也会出现类似的问题，解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,imgvertical-align: top;2.IE6双倍margin的BUG(双边距)问题说明：这是ie6一个著名的bug，当一个元素向一边浮动时，其它同一个方向如果有margin的话，ie6就会产生双倍的margin。例如：在ie6下显示会有margin-left:20px的距离解决方法：加个_display:inline:属性，例如3.ie6下的浮动元素和非浮动元素间出现3像素BUG问题说明：这也是ie6一个著名的bug,当一个元素浮动时，同级别的文字没有浮动，在ie6下它们之间就会产生3个像素的bug。例如：摘要摘要摘要摘要,图片和文字就会出现3像素解决方法：方法一，两个元素都浮动，如：摘要摘要摘要摘要;方法二，这种设计时一般图片和文字要有间隙的，做个ie6的hack就行,如：摘要摘要摘要摘要4.li在IE中底部空行问题说明：当li里面有两个以上的浮动元素时，li的下面就会产生一条空白间隙，例如 栏目标题标题标题解决方法：这个问题和第一个问题很相似，解决方法也是一样，在li上加个垂直方向的属性，例如： 栏目标题标题标题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”的原因）。例如下列代码：标题 *margin: 0;padding: 0;font-size: 12px;.awidth:205px;.bfloat: left;width: 50px; background: black;color: #fff;margin-right: 5px;overflow: hidden;.cfloat: left;width: 150px;background: red; 测试测试测试测试测试测试测试111111111111 测试测试测试测试测试测试测试2222222222解决方法：为何会出现重复文字，谁也没说清楚，包括官方，这个问题，ahuing只在给朋友调试样式时见过，自己写的代码没见过，所以认识这个bug有点晚，ahuing个人认为，ie6将注释也当成内容存在。如何消灭重复文字，只要让上面任何一个条件不满足即可，改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。1).减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3。2).去掉所有的注释。3).在第二个容器后面加一个或者多个来解决。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上面 不多说了，直接复制代码，然后将两个flash.swf改为自己的就行了（主要是此代码）8.position:absolute定位在IE6下存在left和bottom相对最外层视窗（body）定位的bug:问题说明：由于在IE6下，相对定位的元素没有获得IE内部的haslayout属性，因此不创建新的定位上下文，所以绝对定位的元素相对于视口进行定位。解决方法：1)设置_height：1%；/小的高度不会对实际高度造成影响;例如：内容内容内容内容内容内容内容2)相对定位的祖先元素设置过高度和宽度。3)相对定位的祖先元素设置_zoom:1,用于触发元素的layout属性。9.position:absolute定位在IE6下z-index失效的bug:问题说明：在ie6下给浮动层设置z-index失效，例如：正常区块1会在区块2之上，但是IE6不行区块1 区块2解决方法：ie6只识别父层的z-index，所以我们可以给父层也加一个z-index区块1 区块2另外一个解决方法就是后面标签的z-index总是比它前面的z-index高，有些情况下可以将两者的前台顺序调换10.还是position,IE6下对position：fixed不支持的bug问题说明：position：fixed主要用于像客服一样的浮动层，但是ie6却不支持，问题的原因是IE6下的fixed元素绝对定位位置是针对html元素的，而滚动条则是针对body元素的解决方法：用绝对定位模拟一个bodybackground-image:(xx.gif);/*一张不存在的图片，就是完全透明的*/.fixed_postion:absolute;expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)/底部expression(eval(document.documentElement.scrollTop);/*头部*/expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop-80);/*右侧*/11.再来个position问题，ie6让绝对定位的层在select的上面问题说明：绝对定位的层在ie6下不管对其的z-index给多大的值它始终在select控件的下面解决方法：1)通过js控制select的显示和隐藏(有弹出层时隐藏select)，不过当div只是遮住select的一半时，整个都会隐藏，不适合一些情况。2)用iframe遮盖select，iframe的z-index要比select高,让弹出层和iframe重合。12.哈哈，最后一个position问题，ie6下position:absolute不显示问题说明：例如：下面的代码，a1绝对定位，a2，a3浮动，注意样式当盒子box的宽度-（a2+a3）3时，a1就会不显示，可以直接复制代码保存后预览，这种情况的机率很小，但它出现时，会让你摸不着方向*margin: 0;padding: 0;font-size: 12px;.boxposition: relative;background: black;color: #fff;height: 50px;width: 100px;.a1position: absolute;background: red;left: 0;top:30px;.a2float: left;background: purple;width: 48px;height: 40px;.a3float: left;background: gray;width: 50px;height: 40px;区块1区块2区块3解决方法：1)在绝对定位的层和浮动层之间加一个清除浮动的代码，例如：2)可以把绝对定位的层放在所有浮动层的最后面，再在绝对定位的层上加个清除浮动，如：.a1position: absolute;background: red;left: 0;top:30px;clear:both;13.a链接点击的难看外框的方法：IE6下在标签里设置hideFocus=true,其他浏览器对a设置：outline:none例如：aoutline:none14.IE6不支持min-height/max-height/min-width/max-width的bug问题说明：无解决方法：根据IE6的特性模拟出来height:auto!important;min-height: x px;/*需要的最小高度*/height: x px15.ie6边框出现断线的bug问题说明：当边框内的元素有激动时，没有清除浮动，滑动滚动条会出现断线的问题。例如.boxborder: 1px solid #ccc;.plist lifloat: left; 解决方法：原因是box没有haslayout1)加个属性_height:1%或者_zoom:1,这是ahuing常用字的方法2)清除浮动也可以,在ul下加3）给box加个背景颜色也行16. IE6中伪类:hover的使用及BUG问题说明：ie6是不支持除a标签以外的:hover的，例如：.test:hoverbackground: red;width:50px;height: 50px;解决方法：1）将a标签display:black,例如：.testdisplay: block; .test:hover divbackground: red;width:50px;height: 50px;不过这样做貌似不符合标准2）用js或者jq解决17.原来IE6是可以支持!important的.demo color:#F00!important; color:#000; /*IE6显示错误理解：.demo显示为黑色*/*而下面IE6是正确理解的：.demo显示为红色*/.demo color:#F00!important;.demo color:#000; 18.ie下空格的大小和ff不一样问题说明：有时我们在布局时需要用到空格来对齐文本，例如：密  码和用户名，这样写才可以对齐，而在ie上面未必是这样的解决方法：将字体设置为宋体，即：font-family: simsun;19.容器中连续的英文或者数字，不自动换行问题说明：wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww解决方法：wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww20.ie6 div高度无法小于10像素解决方法 用CSS 的定义一个DIV的高度时，在IE 7浏览器下可以正常显示。但是在IE 6 中，height 在10px以下就无法定义了。这点跟表格有点类似。解决的方法如下：法一：定义overflow属性。比如想定义一个高度为2px 的线条。法二：将div 的字体大小属性fontsize 设置为跟高度相同。&nbps;21.chrome谷歌浏览器flash下面一条空白问题说明：当一个div包含一个object标签时，一般是flash文件，flash下面会有一条空白出来，例如.解决方法：通常下flash或者图片下有空白用vertical-align:top就能清除掉，今天试了下不行，经过几番测试，用line-height:0可以去掉空白。结果就是.adline-height:022.本来觉得position的问题已经够了，但是还在继续，又是爱一流先生(ie6)，调试一个小BUG真费脑筋，但是现在还是要记录下，假如对一个元素设置了position:absolute及 bottom:0，然后设置父元素的position为 relative，在IE6中，当父元素在页面中所占据的高度（不一定是css里设置的，也可以是计算出来的，且不