Browser Webkit che rendono CSS diversi da Mozilla Firefox ... Perché?

Question

Sto disegnando un modulo che è già stato contrassegnato (apportato alcune modifiche al markup), e di solito lavoro in Firefox per lo stile in modo da poter usare firebug e la barra degli strumenti di sviluppo web.

In questo progetto, ho notato che i miei stili sono visualizzati in modo diverso per una particolare area (diversi elementi) nei browser basati su webkit Chrome e Safari, che in Firefox (non entreremo nemmeno in Internet Explorer, sebbene sia schierandosi con il display di Firefox).

Non riesco a capire perché gli stili siano visualizzati in modo così diverso. Normalmente c'è qualche regola che sto trascurando che Firefox dà per scontato, e gli altri ne hanno bisogno specificato. Ma qui non capisco perché si sta manifestando in questo modo. In particolare mi riferisco alla parte inferiore del modulo in cui gli utenti possono inserire le loro informazioni di contatto, quindi inviare il modulo. Allegherò schermate di riferimento per quanto riguarda la discrepanza.

Ecco l'URL quindi sentitevi liberi di verificarlo da soli. Sebbene sia consigliabile che questa sia una pagina di produzione (già rilasciata), quindi se provi il modulo, verrai aggiunto al database dei contatti di CURE.

http://www.helpcurenow.org/survey2010

Ecco le schermate:

Firefox (il mio modo intendo farlo sembrare) alt text http://static.helpcurenow.org/images/test/firefox.jpg

Chrome, e poi Safari - strano cambiamento pulsante per inviare alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

Come bonus, se qualcuno vuole aiutarmi a capire perché sulla Terra IE7 vuole non mostrare lo sfondo dietro la coda solo le versioni e come risolvere il problema, sarei molto obbligato!

Grazie mille.

Answer 1

Il tuo <ol> non è chiuso, il che rende WebKit posizionare il pulsante di invio all'interno dello <fieldset> nel tentativo di correggere il codice.

Answer 2

Hai usato browser reset css. Browser diversi hanno stili di default diversi per vari elementi, il reset reset CSS reimposta tutti questi stili predefiniti in modo che la roba sia simile in tutti i browser.

Answer 3

I browser FF e Webkit presentano alcune differenze, li ho incontrati anche con le forme!

L'ho risolto dividendo il mio CSS per indirizzare i due browser con lo script CSS Browser Selector. Ha fatto miracoli, ha solo impostato alcune cose in modo diverso per Webkit e ha risolto il problema.

Avete un esempio dal vivo o del codice sorgente da postare in modo che possiamo aiutarvi di più con i vostri problemi IE7 pure?

Spero che questo aiuti.

Edit:

<ol> 

      <li class="contact-info"> 
       <label class="field-required" for="first_name">First Name</label> 
       <input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" /> 
      </li> 

      <li class="contact-info"> 
       <label class="field-required" for="last_name">Last Name</label> 
       <input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" /> 
      </li> 

      <li class="contact-info"> 
       <label class="field-required" for="email_address">Email Address</label> 
       <input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" /> 
      </li> 

     </fieldset> 

     <!--TransactionFields section end--> 
     <script language="JavaScript" type="text/javascript"> 
     ... 
     </script> 

     <div class="button-row"> 
      <input type="button" name="SubmitButton" id="SubmitButton" value="Submit" onclick="SubmitForm425952(form);" class='HtmlButton' /> 
     </div> 

    </form> 
    <!--form javascript--> 
    <script language="JavaScript"> 
    ... 
    </script> 

NO OL 


</div></td></tr> 
</table> 


    </div> 
    <!--End Featured Content--> 

tuo <ol> non è stato chiuso dopo il secondo tag script.

Answer 4

È possibile che tu abbia dimenticato le regole specifiche per il css.

Per esempio - box-sizing potrebbe essere necessario specificare -moz-box-sizing