浏览器css+js兼容总结Word文件下载.docx
- 文档编号:20874040
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:6
- 大小:17.96KB
浏览器css+js兼容总结Word文件下载.docx
《浏览器css+js兼容总结Word文件下载.docx》由会员分享,可在线阅读,更多相关《浏览器css+js兼容总结Word文件下载.docx(6页珍藏版)》请在冰豆网上搜索。
body:
nth-of-type
(1)p{color:
}/*Chrome、Safari支持*/
1、CSS透明
IE:
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF:
opacity:
0.6
2、cursor:
handVScursor:
pointer
FF不支持hand,但ie支持pointer
解决方法:
统一使用pointer
3、padding问题
padding5px4px3px1pxFireFox无法解释简写,
必须改成padding-top:
5px;
padding-right:
4px;
padding-bottom:
3px;
padding-left:
1px;
4、消除ul/ol等列表的缩进时
样式应写成:
list-style:
none;
margin:
0px;
padding:
其中margin属性对IE有效,padding属性对FireFox有效
5、CSS圆角
不支持圆角
-moz-border-radius:
4px,或者-moz-border-radius-topleft:
-moz-border-radius-topright:
-moz-border-
radius-bottomleft:
-moz-border-radius-bottomright:
6、CSS双线凹凸边框
border:
2pxoutset;
-moz-border-top-colors:
#d4d0c8white;
-moz-border-left-colors:
-moz-border-right-colors:
#404040#808080;
-moz-border-bottom-colors:
7、table边框
.ctb{
border-top:
1pxsolid#3E4093;
border-left:
border-right:
0px;
border-bottom:
.ctbtd{
1pxsolid#F4F4FF;
-------------------------------------------------------------------------------------------
js部分:
1、window.event
functiongotoSubmit(e){
e=e?
e:
(window.event?
window.event:
null);
2、IE:
interText;
interHTML或者textContent
3、获取鼠标位置:
在IE中,event对象有x,y属性,FF中没有。
在FF中,与event.x等效的是event.pageX。
但event.pageXIE中没有。
解决方法:
mX=event.clientX?
event.clientX:
event.pageX;
4、event.srcElement问题
说明:
IE下,even对象有srcElement属性,但是没有target属性;
Firefox下,even对象有target属性,但是没有srcElement属性.
使用obj(obj=event.srcElement?
event.srcElement:
event.target;
)来代替IE下的event.srcElement或者Firefox下的event.target.
或者
if(document.all)
{
obj=event.srcElement;
}
else
obj=arguments[0].target;
5、window.location.href问题
IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
使用window.location来代替window.location.href.
6、模态和非模态窗口问题
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;
Firefox下则不能.
直接使用window.open(pageURL,name,parameters)方式打开新窗口
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.例如:
varparWin=window.opener;
parWin.document.getElementById("
Aqing"
).value="
;
7、FF中类似obj.style.height=imgObj.height的语句无效
obj.style.height=imgObj.height+'
px'
8、捕获事件
if(document.all)
window.document.attachEvent("
onclick"
gorush);
else
window.document.addEventListener("
click"
gorush,false)
9、判断浏览器类型:
varisIE=document.all?
true:
false;
10、
如果在frame标签中书写了以下属性:
<
framesrc="
/xx.htm"
id="
frameId"
name="
frameName"
/>
那么ie可以通过id或者name访问这个frame对应的window对象
而FF只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
window.top.frameId或者window.top.frameName来访问这个window对象
只能这样window.top.frameName来访问这个window对象
另外,在FF和ie中都可以使用window.top.document.getElementById("
)来访问frame标签
并且可以通过window.top.document.getElementById("
testFrame"
).src='
xx.htm'
来切换frame的内容
也都可以通过window.top.frameName.location='
11、父结点的问题
在FF中没有parentElementparentElement.children而用parentNodeparentNode.childNodes
childNodes的下标的含义在IE和FF中不同,FF使用DOM规范,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)
12、自定义属性问题
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
FF下,只能使用
getAttribute()获取自定义属性.
统一通过getAttribute()获取自定义属性.
13、事件委托方法
document.body.onload=inject;
//Functioninject()在这之前已被实现
document.body.onload=inject();
如果要加传递参数,可以做个闭包
(function(arg){
document.body.onload=function(){inject(arg);
};
})(arg)
14、css"
float"
属性
document.getElementById("
header"
).style.styleFloat="
left"
).style.cssFloat="
15、获取label标签“for”属性
varmyObject=document.getElementById("
myLabel"
);
varmyAttribute=myObject.getAttribute("
htmlFor"
for"
对于setAtrribute方法来说也是同样的语法。
16、获取视窗或浏览器窗口的尺寸
IE:
varmyBrowserSize=[0,0];
myBrowserSize[0]=document.documentElement.clientWidth;
myBrowserSize[1]=document.documentElement.clientHeight;
myBrowserSize[0]=window.innerWidth;
myBrowserSize[1]=window.innerHeight;
17、设置滤镜:
myElement"
myObject.style.filter="
alpha(opacity=80)"
myObject.style.opacity="
0.5"
18、.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement
即这四个属性(clientWidth、clientHeight、scrollLeft、scrollTop)一定要用document.documentElement
但是document.body.appendChild()和document.body.removeChild()却是可以用的,而且用document.documentElement.appendChild()
和document.documentElement.removeChild()代替却会报错;
总结了一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement
19、body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;
而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如:
body>
scripttype="
text/javascript"
>
document.body.onclick=function(evt){
evt=evt||window.event;
alert(evt);
/script>
/body>
IE&
Firefox:
}<
20、幻灯片效果
if(document.all){
filters[0].Apply();
document.getElementById(imageid).src=path;
//更换图片
filters[0].play();
else{
firfoxPlays(path,imageid)
varintTimeStep=20;
varintAlphaStep=0.04;
varcurSObj=null;
varcurOpacity=null;
functionfirfoxPlays(path,imageid){
curSObj=document.getElementById(imageid);
curSObj.style.opacity=0;
curSObj.src=path;
curOpacity=0;
setObjOpen();
functionsetObjOpen(){
curOpacity+=intAlphaStep;
curSObj.style.opacity=curOpacity;
if(curOpacity<
1){
setTimeout('
setObjOpen()'
intTimeStep);
21、offsetLeft问题
varamount=7;
//每次移动7(速度)
if(!
document.all){
varf=document.getElementById(flashDiv);
f.style.left=(f.offsetLeft-amount)+'
document.getElementById(flashDiv).style.pixelLeft-=amount;
22、判断浏览器
if(navigator.userAgent.indexOf("
Firefox"
)>
-1)
其他同理
23、document.documentElement.scrollTop
在safari和chrome下为
document.documentElement.scrollTop+document.body.scrollTop
24、//聚焦控件后把光标放到最后
functiongetSelectPos(obj)
{
varesrc=document.getElementById(obj);
if(esrc==null)
esrc=event.srcElement;
esrc=arguments[0].target;
window.setTimeout(function(){esrc.focus();
},0);
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 浏览器 css js 兼容 总结