html div+css 常见的浏览器兼容问题及解决方法.docx

2）相对定位的祖先元素设置过高度和宽度。

3）相对定位的祖先元素设置_zoom:

1,用于触发元素的layout属性。

9.position:

absolute定位在IE6下z-index失效的bug:

问题说明：

在ie6下给浮动层设置z-index失效，例如：

正常区块1会在区块2之上，但是IE6不行

relative;">

absolute;z-index:

10;">区块1

relative">

absolute;z-index:

5;">区块2

解决方法：

ie6只识别父层的z-index，所以我们可以给父层也加一个z-index

relative;z-index:

10;">

absolute;z-index:

10;">区块1

relative">

absolute;z-index:

5;">区块2

另外一个解决方法就是后面标签的z-index总是比它前面的z-index高，有些情况下可以将两者的前台顺序调换

10.还是position,IE6下对position：

fixed不支持的bug

问题说明：

position：

fixed主要用于像客服一样的浮动层，但是ie6却不支持，问题的原因是IE6下的fixed元素绝对定位位置是针对html元素的，而滚动条则是针对body元素的

解决方法：

用绝对定位模拟一个

body{background-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重合。

absolute;">

100px;height:

100px;top:

320px;left:

60px;background-color:

transparent;position:

absolute;z-index:

-1;">

12.哈哈，最后一个position问题，ie6下position:

absolute不显示

问题说明：

例如：

下面的代码，a1绝对定位，a2，a3浮动，注意样式当盒子box的宽度-（a2+a3）<3时，a1就会不显示，可以直接复制代码保存后预览，这种情况的机率很小，但它出现时，会让你摸不着方向

区块1

区块2

区块3

解决方法：

1）在绝对定位的层和浮动层之间加一个清除浮动的代码，例如：

both;height:

0;overflow:

hidden;font-size:

0;line-height:

0;">

2）可以把绝对定位的层放在所有浮动层的最后面，再在绝对定位的层上加个清除浮动，如：

.a1{position:

absolute;background:

red;left:

0;top:

30px;clear:

both;}

13.a链接点击的难看外框的方法：

IE6下在标签里设置hideFocus=true,其他浏览器对a设置：

outline:

none

例如：

a{outline:

none}

14.IE6不支持min-height/max-height/min-width/max-width的bug

问题说明：

无

解决方法：

根据IE6的特性模拟出来

height:

auto!

important;

min-height:

xpx;/*需要的最小高度*/

height:

xpx

15.ie6边框出现断线的bug

问题说明：

当边框内的元素有激动时，没有清除浮动，滑动滚动条会出现断线的问题。

例如

解决方法：

原因是box没有haslayout

1）加个属性_height:

1%或者_zoom:

1,这是ahuing常用字的方法

2）清除浮动也可以,在ul下加

0;overflow:

hidden;clear:

both;">

3）给box加个背景颜色也行

16.IE6中伪类:

hover的使用及BUG

问题说明：

ie6是不支持除a标签以外的:

hover的，例如：

解决方法：

1）将a标签display:

black,例如：

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.容器中连续的英文或者数字，不自动换行

问题说明：

50px;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

解决方法：

50px;word-wrap:

break-word;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

20.ie6div高度无法小于10像素解决方法

用CSS的定义一个DIV的高度时，在IE7浏览器下可以正常显示。

但是在IE6中，height在10px以下就无法定义了。

这点跟表格有点类似。

解决的方法如下：

法一：

定义overflow属性。

比如想定义一个高度为2px的线条。

2px;overflow:

hidden;background:

#000000;width:

778px;">

法二：

将div的字体大小属性fontsize设置为跟高度相同。

2px;font-size:

2px;background:

#000000;width:

778px;">&nbps;

21.chrome谷歌浏览器flash下面一条空白

问题说明：

当一个div包含一个object标签时，一般是flash文件，flash下面会有一条空白出来，例如

解决方法：

通常下flash或者图片下有空白用vertical-align:

top就能清除掉，今天试了下不行，经过几番测试，用line-height:

0可以去掉空白。

结果就是.ad{line-height:

0}

22.本来觉得position的问题已经够了，但是还在继续，又是爱一流先生（ie6），调试一个小BUG真费脑筋，但是现在还是要记录下，假如对一个元素设置了position:

absolute及bottom:

0，然后设置父元素的position为relative，在IE6中，当父元素在页面中所占据的高度（不一定是css里设置的，也可以是计算出来的，且不包括margin）为偶数时，一切正常，但如果为奇数时，该绝对定位的子元素会与父元素的底部偏移1px，所以碰到这样的问题，可以尝试改变下父元素的height、border或paddin

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

html div+css 常见的浏览器兼容问题及解决方法 div css 常见 浏览器 兼容问题 解决方法

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。