js 불 여우 와 IE 브 라 우 저의 차이

22525 단어 브 라 우 저
    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       constconst constVar = 32;  IE       。
(2)    :
    constvar12. 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   ,           。

좋은 웹페이지 즐겨찾기