html div+css 常见的浏览器兼容问题及解决方法Word文档格式.docx
- 文档编号:22756081
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:13
- 大小:21.86KB
html div+css 常见的浏览器兼容问题及解决方法Word文档格式.docx
《html div+css 常见的浏览器兼容问题及解决方法Word文档格式.docx》由会员分享,可在线阅读,更多相关《html div+css 常见的浏览器兼容问题及解决方法Word文档格式.docx(13页珍藏版)》请在冰豆网上搜索。
wrap属性设置文本输入区内的换行模式:
wrap="
virtual"
将实现文本区内的自动换行,以改善对用户的显示,但在传输给服务器时,文本只在用户按下Enter键的地方进行换行,其他地方没有换行的效果。
physical"
将实现文本区内的自动换行,并以这种形式传送给服务器,就像用户真的那样键入的。
因为文本要以用户在文本区内看到的效果传输给服务器,因为使用自动换行是非常有用的方法。
2.IE6双倍margin的BUG(双边距)
这是ie6一个著名的bug,当一个元素向一边浮动时,其它同一个方向如果有margin的话,ie6就会产生双倍的margin。
例如:
divstyle="
float:
left;
margin-left:
10px;
>
在ie6下显示会有margin-left:
20px的距离
加个_display:
inline:
属性,例如<
_display:
inline;
3.ie6下的浮动元素和非浮动元素间出现3像素BUG
这也是ie6一个著名的bug,当一个元素浮动时,同级别的文字没有浮动,在ie6下它们之间就会产生3个像素的bug。
imgstyle="
src="
摘要摘要摘要摘要<
图片和文字就会出现3像素
方法一,两个元素都浮动,如:
spanstyle="
/span>
;
方法二,这种设计时一般图片和文字要有间隙的,做个ie6的hack就行,如:
margin-right:
5px;
_margin-right:
2px;
4.li在IE中底部空行
当li里面有两个以上的浮动元素时,li的下面就会产生一条空白间隙,例如
ulclass="
tlist"
<
li>
栏目<
astyle="
href="
#"
target="
_blank"
标题标题标题<
/a>
/li>
/ul>
这个问题和第一个问题很相似,解决方法也是一样,在li上加个垂直方向的属性,例如:
listyle="
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”的原因)。
例如下列代码:
!
DOCTYPEhtmlPUBLIC"
-//W3C//liDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gbk"
/>
title>
标题<
/title>
style>
*{margin:
0;
padding:
font-size:
12px;
.a{width:
205px;
.b{float:
width:
50px;
background:
black;
color:
#fff;
overflow:
hidden;
.c{float:
150px;
background:
red;
/style>
/head>
body>
divclass="
a"
b"
测试测试测试测试测试测试测试111111111111<
--注释-->
c"
测试测试测试测试测试测试测试2222222222<
/body>
/html>
为何会出现重复文字,谁也没说清楚,包括官方,这个问题,ahuing只在给朋友调试样式时见过,自己写的代码没见过,所以认识这个bug有点晚,ahuing个人认为,ie6将注释也当成内容存在。
如何消灭重复文字,只要让上面任何一个条件不满足即可,
改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
1).减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3。
2).去掉所有的注释。
3).在第二个容器后面加一个或者多个<
clear"
来解决。
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:
transparenturl("
)no-repeatscroll00;
_background-image:
url("
filename.gif"
这种方法只需要在切图时多存储一份.gif格式的图片,一般采用这种方法。
7.让position:
absolute弹出层在flash上面
objectclassid="
clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
ave/cabs/flash/swflash.cab#version=6,0,29,0"
width="
300"
height="
190"
paramname="
movie"
value="
flash.swf"
quality"
high"
wmode"
transparent"
embedsrc="
wmode="
quality="
pluginspage="
layer"
type="
application/x-shockwave-flash"
/embed>
/object>
不多说了,直接复制代码,然后将两个flash.swf改为自己的就行了(主要是此代码<
)
8.position:
absolute定位在IE6下存在left和bottom相对最外层视窗(body)定位的bug:
由于在IE6下,相对定位的元素没有获得IE内部的haslayout属性,因此不创建新的定位上下文,所以绝对定位的元素相对于视口进行定位。
1)设置_height:
1%;
//小的高度不会对实际高度造成影响;
position:
_height:
1%;
内容内容内容内容内容内容内容<
absolute;
left:
top:
2)相对定位的祖先元素设置过高度和宽度。
3)相对定位的祖先元素设置_zoom:
1,用于触发元素的layout属性。
9.position:
absolute定位在IE6下z-index失效的bug:
在ie6下给浮动层设置z-index失效,例如:
正常区块1会在区块2之上,但是IE6不行
z-index:
10;
区块1<
relative"
5;
区块2<
ie6只识别父层的z-index,所以我们可以给父层也加一个z-index
另外一个解决方法就是后面标签的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重合。
iframescrolling="
no"
frameborder="
0"
style="
100px;
height:
top:
320px;
left:
60px;
background-color:
transparent;
position:
z-index:
-1;
/iframe>
12.哈哈,最后一个position问题,ie6下position:
absolute不显示
下面的代码,a1绝对定位,a2,a3浮动,注意样式当盒子box的宽度-(a2+a3)<
3时,a1就会不显示,可以直接复制代码保存后预览,这种情况的机率很小,但它出现时,会让你摸不着方向
.box{position:
height:
100px;
.a1{position:
30px;
.a2{float:
purple;
48px;
40px;
.a3{float:
gray;
box"
a1"
a2"
a3"
区块3<
1)在绝对定位的层和浮动层之间加一个清除浮动的代码,例如:
clear:
both;
line-height:
2)可以把绝对定位的层放在所有浮动层的最后面,再在绝对定位的层上加个清除浮动,如:
both;
13.a链接点击的难看外框的方法:
IE6下在标签里设置hideFocus=true,其他浏览器对a设置:
outline:
none
ahref="
###"
hideFocus="
true"
title="
.."
a{outline:
none}
14.IE6不支持min-height/max-height/min-width/max-width的bug
无
根据IE6的特性模拟出来
auto!
important;
min-height:
xpx;
/*需要的最小高度*/
xpx
15.ie6边框出现断线的bug
当边框内的元素有激动时,没有清除浮动,滑动滚动条会出现断线的问题。
例如
.box{border:
1pxsolid#ccc;
.plistli{float:
plist"
imgwidth="
pic/s.png"
原因是box没有haslayout
1)加个属性_height:
1%或者_zoom:
1,这是ahuing常用字的方法
2)清除浮动也可以,在ul下加<
3)给box加个背景颜色也行
16.IE6中伪类:
hover的使用及BUG
ie6是不支持除a标签以外的:
hover的,例如:
.test:
hover{background:
50px;
}<
test"
1)将a标签display:
black,例如:
.test{display:
block;
}.test:
hoverdiv{background:
aclass="
不过这样做貌似不符合标准
2)用js或者jq解决
17.原来IE6是可以支持!
important的
.demo{color:
#F00!
color:
#000;
}/*IE6显示错误理解:
.demo显示为黑色*/
/*而下面IE6是正确理解的:
.demo显示为红色*/
18.ie下空格的大小和ff不一样
有时我们在布局时需要用到空格来对齐文本,例如:
密&
nbsp;
&
码和用户名,这样写才可以对齐,而在ie上面未必是这样的
将字体设置为宋体,即:
font-family:
simsun;
19.容器中连续的英文或者数字,不自动换行
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<
word-wrap:
break-word;
20.ie6div高度无法小于10像素解决方法
用CSS的定义一个DIV的高度时,在IE7浏览器下可以正常显示。
但是在IE6中,height在10px以下就无法定义了。
这点跟表格有点类似。
解决的方法如下:
法一:
定义overflow属性。
比如想定义一个高度为2px的线条。
2px;
hidden;
#000000;
778px;
法二:
将div的字体大小属性fontsize设置为跟高度相同。
nbps;
21.chrome谷歌浏览器flash下面一条空白
当一个div包含一个object标签时,一般是flash文件,flash下面会有一条空白出来,例如<
ad"
object>
...<
通常下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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html div+css 常见的浏览器兼容问题及解决方法 div css 常见 浏览器 兼容问题 解决方法
![提示](https://static.bdocx.com/images/bang_tan.gif)