Webkit-Browser, die CSS anders darstellen als Mozilla Firefox ... Warum?

Question

Ich style ein Formular, das bereits markiert wurde (einige Markup-Änderungen vorgenommen), und ich arbeite normalerweise in Firefox zu stylen, so dass ich Firebug und die Web-Entwickler-Toolbar verwenden kann.

Bei diesem Projekt habe ich festgestellt, dass meine Stile für einen bestimmten Bereich (mehrere Elemente) in den webkitbasierten Browsern Chrome und Safari sehr unterschiedlich angezeigt werden als in Firefox (wir werden nicht einmal in den Internet Explorer gelangen) Abstellgleis mit dem Firefox-Display).

Ich kann nicht herausfinden, warum die Stile so unterschiedlich angezeigt werden. Normalerweise gibt es eine Regel, die ich vernachlässige, dass Firefox einfach als selbstverständlich betrachtet wird, und die anderen brauchen es spezifiziert. Aber hier verstehe ich nicht, warum es so aussieht. Insbesondere beziehe ich mich auf den unteren Bereich des Formulars, in dem Benutzer ihre Kontaktinformationen eingeben und dann das Formular absenden können. Ich werde Screenshots als Referenz zur Diskrepanz hinzufügen.

Hier ist die URL so fühlen Sie sich frei, es auf eigene Faust zu überprüfen. Bitte beachten Sie, dass dies eine bereits veröffentlichte Produktionsseite ist. Wenn Sie das Formular also ausprobieren, werden Sie in die Kontaktdatenbank von CURE aufgenommen.

http://www.helpcurenow.org/survey2010

Hier die Screenshots:

Firefox (so wie ich es die Absicht, zu sehen) alt text http://static.helpcurenow.org/images/test/firefox.jpg

Chrome und dann Safari - seltsame Wechseltaste alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

einreichen

Als Bonus, wenn jemand mir helfen will herauszufinden, warum in der Welt IE7 will nicht den Hintergrund hinter der que zeigen Nur Stirungen und wie ich das beheben könnte, wäre ich sehr verpflichtet!

Vielen Dank.

Answer 1

Ihre <ol> ist nicht geschlossen, was Webkit platziert die Senden-Schaltfläche innerhalb der <fieldset> in einem Versuch, Ihren Code zu beheben.

Answer 2

Haben Sie browser reset css verwendet. Verschiedene Browser haben verschiedene Standardstile für verschiedene Elemente, das Zurücksetzen CSS setzt alle diese Standardstile zurück, so dass die Dinge in allen Browsern ähnlich aussehen.

Answer 3

FF und Webkit Browser haben ein paar Unterschiede, ich habe sie auch vor allem mit Formularen begegnet!

Ich löste es, indem ich mein CSS spaltete, um die zwei Browser mit dem CSS Browser Selector-Skript anzusprechen. Hat Wunder gewirkt, einfach ein paar Dinge anders für Webkit eingestellt und die ganze Sache repariert.

Haben Sie ein Live-Beispiel oder einen Quellcode zum Hochladen, damit wir Ihnen auch bei Ihren IE7-Problemen helfen können?

Hoffe, dass hilft.

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--> 

Ihre <ol> wurde nach dem zweiten Skript-Tag nicht geschlossen.

Answer 4

Möglicherweise haben Sie -moz spezifische CSS-Regeln vergessen.

Zum Beispiel - verwenden Box-Sizing Sie müssen -moz-box-Sizing