php+html+js避免出现兼容的方法文档格式.docx
- 文档编号:21121155
- 上传时间:2023-01-27
- 格式:DOCX
- 页数:9
- 大小:21.65KB
php+html+js避免出现兼容的方法文档格式.docx
《php+html+js避免出现兼容的方法文档格式.docx》由会员分享,可在线阅读,更多相关《php+html+js避免出现兼容的方法文档格式.docx(9页珍藏版)》请在冰豆网上搜索。
解决办法:
不修改input.type属性。
如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。
八、window.event问题
window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。
在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用varmyEvent=evt?
evt:
(window.event?
window.event:
null)
示例:
<
inputtype="
button"
onclick="
doSomething(event)"
/>
scriptlanguage="
javascript"
>
functiondoSomething(evt){
varmyEvent=evt?
...
}
九、event.x与event.y问题
IE下,even对象有x、y属性,但是没有pageX、pageY属性;
Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。
varmyX=event.x?
event.x:
event.pageX;
varmyY=event.y?
event.y:
event.pageY;
如果考虑第8条问题,就改用myEvent代替event即可。
十、event.srcElement问题
IE下,even对象有srcElement属性,但是没有target属性;
Firefox下,even对象有target属性,但是没有srcElement属性。
使用srcObj=event.srcElement?
event.srcElement:
event.target;
十一、window.location.href问题
IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location。
使用window.location来代替window.location.href。
当然也可以考虑使用location.replace()方法。
十二、模态和非模态窗口问题
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;
Firefox下则不能。
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。
如果需要父窗口控制子窗口的话,使用varsubWindow=window.open(pageURL,name,parameters);
来获得新开的窗口对象。
十三、frame和iframe问题
以下面的frame为例:
(1)访问frame对象
IE:
使用window.frameId或者window.frameName来访问这个frame对象;
Firefox:
使用window.frameName来访问这个frame对象;
统一使用window.document.getElementById(”frameId”)来访问这个frame对象;
(2)切换frame内容
在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src=“.html”或window.frameName.location=“.html”来切换frame的内容;
如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。
十四、body载入问题
Firefox的body对象在body标签没有被浏览器完全读入之前就存在;
而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注]这个问题尚未实际验证,待验证后再来修改。
[注]经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。
十五、事件委托方法
IE下,使用document.body.onload=inject;
其中functioninject()在这之前已被实现;
在Firefox下,使用document.body.onload=inject();
统一使用document.body.onload=newFunction('
inject()'
);
或者document.body.onload=function(){/*这里是代码*/}
[注意]Function和function的区别
十六、访问的父元素的区别
在IE下,使用obj.parentElement或obj.parentNode访问obj的父结点;
在firefox下,使用obj.parentNode访问obj的父结点。
因为firefox与IE都支持DOM,因此统一使用obj.parentNode来访问obj的父结点。
十七、innerText的问题.
innerText在IE中能正常工作,但是innerText在FireFox中却不行。
在非IE浏览器中使用textContent代替innerText。
if(navigator.appName.indexOf("
Explorer"
)>
-1){
document.getElementById('
element'
).innerText="
mytext"
;
}else{
).textContent="
[注]innerHTML同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。
十八、Table操作问题
ie、firefox以及其它浏览器对于table标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
document.appendChild在往表里插入行时FIREFOX支持,IE不支持
把行插入到TBODY中,不要直接插入到表
//向table追加一个空行:
varrow=otable.insertRow(-1);
varcell=document.createElement("
td"
cell.innerHTML="
"
cell.className="
XXXX"
row.appendChild(cell);
[注]建议使用JS框架集来操作table,如JQuery。
十九、对象宽高赋值问题
FireFox中类似obj.style.height=imgObj.height的语句无效。
统一使用obj.style.height=imgObj.height+‘px'
二十、setAttribute('
style'
'
color:
red;
'
)
FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持
不用setAttribute('
red'
而用object.style.cssText=‘color:
(这写法也有例外)
最好的办法是上面种方法都用上,万无一失
二十一、类名设置
setAttribute('
class'
styleClass'
FIREFOX支持,IE不支持(指定属性名为class,IE不会设置元素的class属性,相反只使用setAttribute时IE自动识CLASSNAME属性)
className'
或者直接object.className='
IE和FF都支持object.className。
二十二、用setAttribute设置事件
varobj=document.getElementById('
objId'
obj.setAttribute('
onclick'
funcitonname();
FIREFOX支持,IE不支持
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下:
obj.onclick=function(){fucntionname();
};
这种方法所有浏览器都支持
二十三、建立单选钮
IE以外的浏览器
varrdo=document.createElement('
input'
rdo.setAttribute('
type'
radio'
name'
radiobtn'
value'
checked'
IE:
varrdo=document.createElement(”<
inputname=”radiobtn”type=”radio”value=”checked”/>
”);
这一点区别和前面的都不一样。
这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了
万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。
问题解决。
二十四、cursor:
handVScursor:
pointer
firefox不支持hand,但ie支持pointer
解决方法:
统一使用pointer
二十五、padding问题
padding5px4px3px1pxFireFox无法解释简写,
必须改成padding-top:
5px;
padding-right:
4px;
padding-bottom:
3px;
padding-left:
1px;
FireFox设置Padding属性后会相应的增加Width和Height属性值,IE不会
用!
important方法多定义一套Height和Width
二六、消除ul、ol等列表的缩进时
样式应写成:
list-style:
none;
margin:
0px;
padding:
其中margin属性对IE有效,padding属性对FireFox有效
二七、CSS透明
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:
opacity:
0.6。
二八、CSS圆角
不支持圆角。
解决方案如下:
技术解决CSS+Jquery实现页面圆角框
附XX文库代码参考连接:
IE利用VML矢量可标记语言作为画笔绘出圆角:
下载一个压缩包ie-css3.htc,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件,.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。
它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。
Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX控件)来完成这个功能。
使用演示:
.main{
border:
1pxsolid#C0C0C0;
-moz-border-radius:
10px;
-webkit-border-radius:
border-radius:
position:
relative;
z-index:
100;
behavior:
url(此处为ie-css3.htc文件的绝对路径);
}
Webkit内核的浏览器支持“-webkit-border-radius:
”属性(10px是圆角半径),可以直接解析出圆角;
Firefox浏览器支持“-moz-border-radius:
”属性,也是可以直接解析出圆角;
IE系浏览器则需要加上“border-radius:
15px;
”的属性。
注意:
1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。
2、一定要有定位属性:
3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。
z-index属性最好设置得比较大,如2。
4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“width:
400px;
height:
400px;
”属性。
5、radius属性的10px是圆角半径,还可以给两个值如“border-radius:
10px5px;
”,这样则左上角与右下角半径为10px,右上角与左下角半径为5px。
也可以赋4个值,为“上
右
下
左”。
-moz-border-radius:
4px,或者-moz-border-radius-topleft:
-moz-border-radius-topright:
-moz-border-radius-bottomleft:
-moz-border-radius-bottomright:
。
二九、CSS双线凹凸边框
2pxoutset;
-moz-border-top-colors:
#d4d0c8white;
-moz-border-left-colors:
-moz-border-right-colors:
#404040#808080;
-moz-border-bottom-colors:
三十、对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的,另外SelectName.options.length,SelectName.options.add/remove都可以在两种浏览器上使用。
注意在add后赋值元素,否则会失败(本人试验如此)。
三十一、XMLHTTP的区别
//mf
if(window.XMLHttpRequest)//mf
{
xmlhttp=newXMLHttpRequest()
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("
GET"
url,true)
xmlhttp.send(null)
//ie
elseif(window.ActiveXObject)//codeforIE
xmlhttp=newActiveXObject("
Microsoft.XMLHTTP"
)
if(xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("
xmlhttp.send()
}
三十二、innerHTML的区别
Firefox不支持innerHTML,解决办法可以如下
rng=document.createRange();
el=document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag=rng.createContextualFragment(content);
while(el.hasChildNodes())//清除原有内容,加入新内容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
三十四、FireFox对div与div之间的空格是忽略的,但IE是处理的;
因此尽量在两个相连的div之间不要有空格和回车,否则可能会造成不同浏览器之间格式不正确,比如著名的3px偏差;
而且原因很难查明
三十五、IE6由于默认行高问题无法定义1px左右高度的容器
在CSS中对容器设置如:
overflow:
hidden|zoom:
0.08|line-height:
1px
三十六、支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开,但是又想设置固定高度又想能够被撑开呢?
解决办法是去掉height属性而设置min-height,为了兼容不支持min-height的IE6可以这样定义:
height:
auto!
important;
200px;
min-height:
三十七、IE6下两个层中间有空隙
设置右侧div也同样浮动float:
left或者相对IE6定义margin-right:
-3px;
三十八、浮动后IE6解释外边距为实际边距的双倍
加上display:
inline
三十九、关于document.all
Firefox可以兼容document.all,但会生成一条警告。
可以用getElementById("
*"
)或者getElementByTagName("
*)来代替
不过对于document.all.length等属性,则完全不兼容。
大家尽量不要使用document.all属性.
四十、img的src刷新问题
在IE下可以用可以刷新图片,但在FireFox下不行。
主要是缓存问题,在地址后面加个随机数就解决了:
1.myImg.src=this.src+’?
’+Math.random();
myImg.src=this.src+’?
+Math.random();
四十一、childNodes获取的节点
childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。
获取子节点时,一般可以通过node.getElementsByTagName()来回避这个问题
四十二、removeNode()在Firefox中节点没有removeNode方法
必须使用如下方法
Js代码:
1.node.parentNode.removeChild(node);
node.parentNode.removeChild(node);
四十三、添加select列表标签的列表项应该用
varoOption=document.createElement_x_x_x('
option'
oOption.text=text;
oOption.value=value;
targetArea.options[targetArea.options.length]=oOption;
//newOption(text,value);
而不是用
varoOption=document.createEl
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- php html js 避免 出现 兼容 方法
![提示](https://static.bdocx.com/images/bang_tan.gif)