CSS设计浏览器兼容性问题Word下载.docx
- 文档编号:21331874
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:12
- 大小:24.60KB
CSS设计浏览器兼容性问题Word下载.docx
《CSS设计浏览器兼容性问题Word下载.docx》由会员分享,可在线阅读,更多相关《CSS设计浏览器兼容性问题Word下载.docx(12页珍藏版)》请在冰豆网上搜索。
20.为什么web标准中IE无法设置滚动条颜色了9
21.为什么无法定义1px左右高度的容器9
22.链接(a标签)的边框与背景9
23.超链接访问过后hover样式就不出现的问题9
24.FORM标签9
25.属性选择器(这个不能算是兼容,是隐藏css的一个bug)10
26.为什么FF下文本无法撑开容器的高度10
Ø
JavaScript
1.HTML对象获取问题
FireFox:
document.getElementById("
idName"
);
ie:
document.idname或者document.getElementById("
).
解决办法:
统一使用document.getElementById("
2.const问题
说明:
Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:
统一使用var关键字来定义常量.
3.event.x与event.y问题
IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
使用mX(mX
=
event.x
?
:
event.pageX;
)来代替IE下的event.x或者Firefox下的event.pageX.
4.window.location.href问题
IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
使用window.location来代替window.location.href.
5.frame问题
以下面的frame为例:
<
frame
src="
xxx.html"
id="
frameId"
name="
frameName"
/>
(1)访问frame对象:
IE:
使用window.frameId或者window.frameName来访问这个frame对象.
frameId和frameName可以同名。
Firefox:
只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("
)来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("
testFrame"
).src
"
或window.frameName.location
来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent
frame),可以在frame中使用parent来访问父窗口。
例如:
parent.document.form1.filename.value="
Aqing"
;
6.模态和非模态窗口问题
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;
Firefox下则不能.
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
var
parWin
window.opener;
parWin.document.getElementById("
).value
7.firefox与IE的父元素(parentElement)的区别
IE:
obj.parentElement
firefox:
obj.parentNode
解决方法:
因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
8.document.formName.item(”itemName”)问题
问题说明:
IE下,可以使用document.formName.item(”itemName”)或document.formName.elements["
elementName"
];
Firefox下,只能使用document.formName.elements["
]。
统一使用document.formName.elements["
9.集合类对象问题
IE下,可以使用()或[]获取集合类对象;
Firefox下,只能使用[]获取集合类对象。
统一使用[]获取集合类对象。
10.自定义属性问题
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
统一通过getAttribute()获取自定义属性。
11.input.type属性问题
IE下input.type属性为只读;
但是Firefox下input.type属性为读写。
不修改input.type属性。
如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。
12.event.srcElement问题
IE下,even对象有srcElement属性,但是没有target属性;
Firefox下,even对象有target属性,但是没有srcElement属性。
使用srcObj=event.srcElement?
event.srcElement:
event.target;
如果考虑第8条问题,就改用myEvent代替event即可。
13.body载入问题
Firefox的body对象在body标签没有被浏览器完全读入之前就存在;
而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注]这个问题尚未实际验证,待验证后再来修改。
[注]经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。
14.事件委托方法
IE下,使用document.body.onload=inject;
其中functioninject()在这之前已被实现;
在Firefox下,使用document.body.onload=inject();
统一使用document.body.onload=newFunction(’inject()’);
或者document.body.onload=function(){/*这里是代码*/}
[注意]Function和function的区别。
15.Table操作问题
ie、firefox以及其它浏览器对于table标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
//向table追加一个空行:
varrow=otable.insertRow(-1);
varcell=document.createElement("
td"
cell.innerHTML="
"
cell.className="
XXXX"
row.appendChild(cell);
[注]由于俺很少使用JS直接操作表格,这个问题没有遇见过。
建议使用JS框架集来操作table,如JQuery。
16.对象宽高赋值问题
FireFox中类似obj.style.height=imgObj.height的语句无效。
CSS
17.cursor:
pointer
firefox不支持hand,但ie支持pointer
统一使用pointer
18.innerText在IE中能正常工作,但在FireFox中却不行.
需用textContent。
if(navigator.appName.indexOf("
Explorer"
)
>
-1){
document.getElementById('
element'
).innerText
my
text"
}
else{
).textContent
}
19.CSS透明
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:
opacity:
0.6。
20.css中的width和padding
在IE7和FF中width宽度不包括padding,在Ie6中包括padding.
21.FF和IEBOX模型解释不一致导致相差2px
box.style{width:
100;
border1px;
}
ie理解为box.width=100
ff理解为box.width=100+1*2=102//加上边框2px
div{margin:
30px!
important;
margin:
28px;
注意这两个margin的顺序一定不能写反,IE不能识别!
important这个属性,但别的浏览器可以识别。
所以在IE下其实解释成这样:
div{maring:
30px;
28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:
XXpx!
22.IE5和IE6的BOX解释不一致
IE5下div{width:
300px;
010px010px;
div的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。
这时我们可以做如下修改div{width:
300px!
width/**/:
340px;
010px010px}
23.ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:
list-style:
none;
0px;
padding:
经验证,在IE中,设置margin:
0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;
在Firefox中,设置margin:
0px仅仅可以去除上下的空白,设置padding:
0px后仅仅可以去掉左右缩进,还必须设置list-style:
none才能去除列表编号或圆点。
也就是说,在IE中仅仅设置margin:
0px即可达到最终效果,而在Firefox中必须同时设置margin:
0px、padding:
0px以及list-style:
none三项才能达到最终效果。
24.元素水平居中问题
FF:
margin:
0auto;
父级{text-align:
center;
}
25.Div的垂直居中问题
vertical-align:
middle;
将行距增加到和整个DIV一样高:
line-height:
200px;
然后插入文字,就垂直居中了。
缺点是要控制内容不要换行。
26.margin加倍的问题
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:
inline;
divid=”imfloat”>
相应的css为
#imfloat{
float:
left;
5px;
/*IE下理解为10px*/
display:
/*IE下再理解为5px*/}
27.IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。
要解决这个问题,可以这样:
#box{width:
80px;
height:
35px;
}html>
body#box{width:
auto;
min-width:
min-height:
28.页面的最小宽度
如上一个问题,IE不识别min,要实现最小宽度,可用下面的方法:
#container{min-width:
600px;
width:
expression(document.body.clientWidth<600?
600px"
:
auto"
);
第一个min-width是正常的;
但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。
29.DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{float:
800px;
#left{float:
50%;
#right{width:
*html#left{margin-right:
-3px;
//这句是关键}
divid="
box"
>
left"
</div>
right"
/div>
30.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
对#layout使用line-height属性或者给#layout使用固定高和宽。
页面结构尽量简单。
31.float的div闭合;
自适应高度
1例如:
<divid=”floatA”>
<divid=”floatB”>
<divid=”NOTfloatC”>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
(其中floatA、floatB的属性已经设置为float:
)
这段代码在IE中毫无问题,问题出在FF。
原因是NOTfloatC并非float标签,必须将float标签闭合。
在<divclass=”floatB”>
<divclass=”NOTfloatC”>
之间加上<divclass=”clear”>
这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
.clear{clear:
both;
②作为外部wrapper的div不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:
hidden;
当包含float的box的时候,高度自适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!
)用zoom:
1;
可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
.colwrapper{overflow:
zoom:
5pxauto;
③对于排版,我们用得最多的css描述可能就是float:
left.有的时候我们需要在n栏的floatdiv后面做一个统一的背景,譬如:
divid=”page”>
divid=”left”>
divid=”center”>
divid=”right”>
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着leftcenterright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决:
divid=”bg”style=”float:
width:
100%”>
再嵌入一个floatleft而宽度是100%的DIV解决之。
④万能float闭合(非常重要!
关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup],将以下代码加入GlobalCSS中,给需要闭合的div加上class="
clearfix"
即可,屡试不爽。
/*ClearFix*/
.clearfix:
after{content:
."
display:
block;
0;
clear:
visibility:
}
.clearfix{display:
inline-block;
/*HidefromIEMac*/
.clearfix{display:
/*EndhidefromIEMac*/
/*endofclearfix*/
或者这样设置:
.hackbox{display:
table;
//将对象作为块元素级的表格显示}
32.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或padding时。
例:
#box{background-color:
#eee;
#boxp{margin-top:
20px;
margin-bottom:
text-align:
p>
p对象中的内容</p>
解决技巧:
在P对象上下各加2个空的div对象CSS代码{height:
overflow:
}或者为DIV加上border属性。
33.IE6下图片下有空隙产生
解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:
block或者设置vertical-align属性为vertical-align:
top/bottom/middle/text-bottom都可以解决.
34.对齐文本与文本输入框
加上vertical-align:
styletype="
text/css"
!
--
input{
height:
border:
1pxsolidred;
-->
/style>
经验证,在IE下任一版本都不适用,而ff、opera、safari、chrome均OK!
35.LI中内容超过长度后以省略号显示
此技巧适用与IE、Opera、safari、chrom浏览器,FF暂不支持。
li{
white-space:
nowrap;
text-overflow:
ellipsis;
-o-text-overflow:
hidden;
36.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Strict//EN"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
html{
scrollbar-face-color:
#f6f6f6;
scrollbar-highlight-color:
#fff;
sc
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 设计 浏览器 兼容性问题