JsのファイアフォックスとIEブラウザでの違い
22518 ワード
IE Internet Explorer， MF Mozzila Firefox
1. document.form.item
(1) ：
document.formName.item("itemName") ， MF
(2) ：
document.formName.elements["elementName"]
(3)
2
2.
(1) ：
()，IE ，MF 。
(2) ：
[] 。 ：document.forms("formName") document.forms["formName"]。
：document.getElementsByName("inputName")(1) document.getElementsByName("inputName")[1]
(3)
3. window.event
(1) ：
window.event MF
(2) ：
MF event ， 。 ：
( IE )：
<input type="button" name="someButton" value=" " onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
( IE MF )：
<input type="button" name="someButton" value=" " onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
， ， ( gotoSubmit )， IE ， 。 ， tpl 。
4. HTML id
(1)
IE ，HTML ID document 。 MF 。
(2)
getElementById("idName") idName 。
5. idName
(1)
IE ， eval(idName) id idName HTML ， MF 。
(2)
getElementById(idName) eval(idName)。
6. HTML id
(1)
MF ， id HTML ， HTML id ，IE 。
(2)
， var ， ， IE 。
， HTML id ， 。
(3)
4
7. event.x event.y
(1)
IE ，event x, y ，MF 。
(2)
MF ， event.x event.pageX。 event.pageX IE 。
event.clientX event.x。 IE 。
event.clientX event.pageX （ ）， 。
， ：
mX = event.x ? event.x : event.pageX;
mX event.x
(3)
event.layerX IE MF ， 。
8. frame
(1)
IE window.testFrame frame，mf
(2)
frame mf ie ：
frame ：
<frame src="xx.htm" id="frameId" name="frameName" />
ie id name frame window
mf name frame window
frame window htm ，
ie： window.top.frameId window.top.frameName window
mf： window.top.frameName window
， mf ie window.top.document.getElementById("frameId") frame
window.top.document.getElementById("testFrame").src = 'xx.htm' frame
window.top.frameName.location = 'xx.htm' frame
9. mf ， getAttribute()
10. mf parentElement parement.children
parentNode parentNode.childNodes
childNodes IE MF ，MF DOM ，childNodes 。
node.getElementsByTagName() 。
html ，IE MF parentNode ，
<form>
<table>
<input/>
</table>
</form>
MF input.parentNode form, IE input.parentNode
MF removeNode ， node.parentNode.removeChild(node)
11.const
(1) :
IE const 。 const constVar = 32; IE 。
(2) :
const ， var 。
12. body
MF body body ， IE body
13. url encoding
js url & & var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url url
tpl ， tpl xml ， & &
MF js &
14. nodeName tagName
(1) ：
MF ， nodeName ， textNode tagName 。 IE ，nodeName
（ ， IE ）。
(2) ：
tagName， 。
15.
IE input.type ， MF
16. document.getElementsByName() document.all[name]
(1) ：
IE ，getElementsByName()、document.all[name] div （ ）。
W3C , ,FireFox , !! ,
IE FireFox，
1.DOCTYPE CSS
2.FF: div margin-left, margin-right auto , IE
3.FF: body text-align , div margin: auto( margin-left,margin-right)
4.FF: padding , div height width, IE , !important height width
5.FF: !important, IE , !important FF
6.div : vertical-align:middle; DIV line-height:200px; ， 。
7.cursor: pointer IE FF ， hand IE
8.FF: ， display: block, float: left 。 menubar, a menubar , height, menubar 。
9. mozilla firefox IE BOX 2px ：
div{margin:30px!important;margin:28px;}
margin ， !important IE ， 。 IE ：
div{maring:30px;margin:28px}
， margin:XXpx!important;
10.IE5 IE6 BOX
IE5
div{width:300px;margin:0 10px 0 10px;}
div 300px-10px( )-10px( ) div 280px， IE6 300px+10px( )+10px( )=320px 。
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
/**/ ， IE5 firefox IE6 ， ， ， ！：）
11.ul Mozilla padding , IE margin
ul{margin:0;padding:0;}
12. div ， div "margin:auto" FireFox
13. div text-align ， float
14. <p> :margin:0px;line-height:XXpx， FireFox
15. ul、ol ， :list-style:none;margin:0px;padding:0px;， margin IE ，padding FireFox
16.padding 5px 4px 3px 1px FireFox , padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
：
1、float div 。
：( floatA、floatB float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
NOTfloatC ， 。
IE ， FF。 NOTfloatC float ， float 。
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
<#div class="clear"></#div>
div ， ， float div ， ， 。
clear ：
.clear{
clear:both;}
， ， wrapper overflow:hidden;
float box ， IE ， IE layout ( IE ！) zoom:1; ， 。
wrapper ：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin 。
float div ie margin 。 ie6 bug。
div display:inline;
：
<#div id="imfloat"></#div>
css
#IamFloat{
float:left;
margin:5px;/*IE 10px*/
display:inline;/*IE 5px*/}
3、
， ， 、 float div ， 。 IE ， div 。 Photoshop Firework 。
4、
， 。 ， ， 。（ ， ）
5、 - !important;
, .FF "!important" , IE .
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
， xxxx !important ，
1. firefox ， ：
<!---------------- ---------------------->
ie firefox 。
2. ie <td> align ， ， ， ，CSS td text-align ， ， <center> 。 firefox 。
3. firefox 。 td 100%， ， ， 。 ，table 100， td width=100%， 100， 。
4. textArea ， BACKGROUND-ATTACHMENT ， scroll ie ， firefox ， ， ， ie BACKGROUND-ATTACHMENT : scroll ， firefox BACKGROUND-ATTACHMENT : fixed， ， ， css。
5. firefox padding ie ， 。