Javascript和CSS浏览器兼容总结文档格式.docx
- 文档编号:19816336
- 上传时间:2023-01-10
- 格式:DOCX
- 页数:15
- 大小:25.91KB
Javascript和CSS浏览器兼容总结文档格式.docx
《Javascript和CSS浏览器兼容总结文档格式.docx》由会员分享,可在线阅读,更多相关《Javascript和CSS浏览器兼容总结文档格式.docx(15页珍藏版)》请在冰豆网上搜索。
故采用event.clientX代替event.x,在IE中也有这个变量
event.clientX与event.pageX有微妙的差别,就是滚动条
要完全一样,可以这样:
mX=event.x?
event.x:
event.pageX;
然后用mX代替event.x
8.关于frame
在IE中可以用window.testFrame取得该frame,FF中不行
window.top.document.getElementById(“testFrame”).src=‘xx.htm’
window.top.frameName.location=‘xx.htm’
9.取得元素的属性
在FF中,自己定义的属性必须getAttribute()取得
10.在FF中没有parentElement,parement.children而用parentNode,parentNode.childNodes
childNodes的下标的含义在IE和FF中不同,FF的childNodes中会插入空白文本节点
可以通过node.getElementsByTagName()来回避这个问题
当html中节点缺失时,IE和FF对parentNode的解释不同,例如:
<
form>
table>
input/>
/table>
/form>
FF中input.parentNode的值为form,而IE中input.parentNode的值为空节点
FF中节点自己没有removeNode方法
必须使用如下方法node.parentNode.removeChild(node)
11.const问题
在IE中不能使用const关键字
以var代替
12.body对象
FF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在
这会产生在IE下,文档没有载入完时,在body上appendChild会出现空白页面的问题
一切在body上插入节点的动作,全部在onload后进行
13.urlencoding
一般FF无法识别js中的&
在js中如果书写url就直接写&
不要写&
14.nodeName和tagName问题
在FF中,所有节点均有nodeName值,但textNode没有tagName值,在IE中,nodeName的使用有问题
使用tagName,但应检测其是否为空
15.元素属性
IE下input.type属性为只读,但是FF下可以修改
16.document.getElementsByName()和document.all[name]的问题
在IE中,getElementsByName()、document.all[name]均不能用来取得div元素
是否还有其它不能取的元素还不知道(这个问题还有争议,还在研究中)
17.调用子框架或者其它框架中的元素的问题
框架问题繁体字网的前段设计师曾做过详细的讲解,简单来说,在IE中,可以用如下方法来取得子元素中的值
document.getElementById(“frameName”).(document.)elementName
window.frames["
frameName"
].elementName
在FF中则需要改成如下形式来执行,与IE兼容:
].contentWindow.document.elementName
].document.elementName
18.对象宽高赋值问题
FireFox中类似obj.style.height=imgObj.height的语句无效
统一使用obj.style.height=imgObj.height+“px”;
19.innerText的问题
innerText在IE中能正常工作,但是innerText在FireFox中却不行
在非IE浏览器中使用textContent代替innerText
20.event.srcElement和event.toElement问题
IE下,even对象有srcElement属性,但是没有target属性;
Firefox下,even对象有target属性,但是没有srcElement属性
varsource=e.target||e.srcElement;
vartarget=e.relatedTarget||e.toElement;
21.禁止选取网页内容
FF需要用CSS禁止,IE用JS禁止
IE:
obj.onselectstart=function(){returnfalse;
FF:
-moz-user-select:
none;
22.捕获事件
FF没有setCapture()、releaseCapture()方法
obj.setCapture();
obj.releaseCapture();
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if(!
window.captureEvents){
o.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
o.releaseCapture();
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
CSS部分
div类
1.居中问题
div里的内容,IE默认为居中,而FF默认为左对齐
可以尝试增加代码margin:
auto
2.高度问题
两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;
但在IE中,下面的div会自动给上面的div让出空间
所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是height:
100%;
但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:
.float_bottom{clear:
both;
height:
0px;
font-size:
padding:
0;
margin:
border:
line-height:
overflow:
hidden;
3.clear:
不想受到float浮动的,就在div中写入clear:
4.IE浮动margin产生的双倍距离
#box{
float:
left;
width:
100px;
000100px;
//这种情况之下IE会产生200px的距离
display:
inline;
//使浮动忽略
5.padding问题
FF设置padding后,div会增加height和width,但IE不会(*标准的XHTML1.0定义dtd好像一致了)
高度控制恰当,或尝试使用height:
宽度减少使用padding
但根据实际经验,一般FF和IE的padding不会有太大区别,div的实际宽=width+padding,所以div写全width和padding,width用实际想要的宽减去padding定义
6.div嵌套时y轴上padding和marign的问题
FF里y轴上子div到父div的距离为父padding+子marign
IE里y轴上子div到父div的距离为父padding和子marign里大的一个
FF里y轴上父padding=0且border=0时,子div到父div的距离为0,子marign作用到父div外面
7.padding,marign,height,width的傻瓜式解决技巧
注意是技巧,不是方法:
写好标准头
!
DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
htmlxmlns=”http:
//www.w3.org/1999/xhtml”>
高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:
both的div
宽尽量用margin,慎用padding,width算准实际要的减去padding
列表类
1.ul标签在FF中默认是有padding值的,而在IE中只有margin有值
先定义ul{margin:
2.ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:
{list-style:
margin:
padding:
显示类
1.display:
block,inline两个元素
block;
//可以为内嵌元素模拟为块元素
//实现同一行排列的的效果
table;
//forFF,模拟table的效果
block块元素,元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
div>
,<
p>
h1>
ul>
和<
li>
是块元素的例子
inline就是将元素显示为行内元素,元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
span>
a>
label>
input>
img>
strong>
em>
是inline元素的例子
2.鼠标手指状显示
全部用标准的写法cursor:
pointer;
背景、图片类
1.background显示问题
全部注意补齐width,height属性
2.背景透明问题
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
alpha(opacity=10);
opacity:
0.6;
-moz-opacity:
0.10;
最好两个都写,并将opacity属性放在下面
div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法
总结:
1、FF:
div设置margin-left,margin-right为auto时已经居中,IE不行。
2、FF:
body设置text-align时,div需要设置margin:
auto(主要是margin-left,margin-right)方可居中
3、FF:
设置padding后,div会增加height和width,但IE不会,故需要用!
important多设一个height和width
4、FF:
支持!
important,IE则忽略,可用!
important为FF特别设置样式
5、div的垂直居中问题:
vertical-align:
middle;
将行距增加到和整个DIV一样高line-height:
200px;
然后插入文字,就垂直居中了。
缺点是要控制内容不要换行。
6、cursor:
pointer可以同时在IEFF中显示游标手指状,hand仅IE可以
7、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:
30px!
important;
28px;
}注意这两个margin的顺序一定不能写反,据阿捷的说法!
important这个属性IE不能识别,但别的浏览器可以识别。
所以在IE下其实解释成这样:
div{maring:
30px;
28px}重复定义的话按照最后一个来执行,所以不可以只写margin:
XXpx!
important;
8、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:
}就能解决大部分问题
注意事项:
1、float的div一定要闭合。
例如:
(其中floatA、floatB的属性已经设置为float:
)
divid=”floatA”>
/div>
divid=”floatB”>
divid=”NOTfloatC”>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。
原因是NOTfloatC并非float标签,必须将float标签闭合。
在
divclass=”floatB”>
divclass=”NOTfloatC”>
之间加上
divclass=”clear”>
这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
.clear{
clear:
此外,为了让高度能自动适应,要在wrapper里面加上overflow:
当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE)用zoom:
1;
可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
.colwrapper{
zoom:
5pxauto;
2、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:
divid=”imfloat”>
相应的css为
#IamFloat{
5px;
/*IE下理解为10px*/
/*IE下再理解为5px*/}
3、关于容器的包涵关系
很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。
在IE中,外层的宽度会被内层更宽的div挤破。
一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容,高度最好不要定义。
浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。
(似乎有时候不会自动往下撑开,不知道具体怎么回事)
5、最狠的手段-!
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!
important”会自动优先解析,然而IE则会忽略.如下
.tabd1{
background:
url(/res/images/up/tab1.gif)no-repeat0px0px!
/*StyleforFF*/
url(/res/images/up/tab1.gif)no-repeat1px0px;
/*StyleforIE*/}
值得注意的是,一定要将xxxx!
important这句放置在另一句之上,上面已经提过
IE7.0对CSS的支持又有新问题。
浏览器多了,网页兼容性更差了,疲于奔命的还是我们,为解决IE7.0的兼容问题,找来了下面这篇文章:
现在我大部分都是用!
important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!
important可以正确解释,会导致页面没按要求显示!
搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#example{color:
#333;
}/*Moz*/
*html#example{color:
#666;
}/*IE6*/
*+html#example{color:
#999;
}/*IE7*/
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999.
一、CSSHACK以下两种方法几乎能解决现今所有HACK.
1,!
important
随着IE7对!
important的支持,!
important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
style>
#wrapper
{
100px!
/*IE7+FF*/
80px;
/*IE6*/
/style>
2,IE6/IE77对FireFox
*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签.
#wrapper{width:
120px;
}/*FireFox*/
*html#wrapper{width:
}/*ie6fixed*/
*+html#wrapper{width:
60px;
}/*ie7fixed,注意顺序*/
注意:
*+html对IE7的HACK必须保证HTML顶部有如下声明:
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
"
http:
//www.w3.org/TR/html4/loose.dtd"
>
二、万能float闭合
关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup]
将以下代码加入GlobalCSS中,给需要闭合的div加上class="
clearfix"
即可,屡试不爽.
/*ClearFix*/
.clearfix:
after
content:
"
."
;
visibility:
.clearfix
inline-block;
/*HidefromIEMac*/
.clearfix{display:
/*EndhidefromIEMac
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Javascript CSS 浏览器 兼容 总结
![提示](https://static.bdocx.com/images/bang_tan.gif)