Webkit tarayıcıları, CSS'yi Mozilla Firefox'tan farklı kılıyor ... Neden?

Question

Önceden işaretlenmiş bir form şekillendiriyorum (bazı biçimlendirme değişiklikleri yaptım), ve normalde Firefox'ta çalışıyorum, böylece firebug ve web geliştirici araç çubuğunu kullanabilirim.

Bu projede, benim stillerimin Firefox'taki webkit tabanlı tarayıcılarda Chrome ve Safari'deki belirli bir alan (çok sayıda öğe) için oldukça farklı olduğunu fark ettim (Internet Explorer'a bile girmeyeceğiz). Firefox ekranı ile siding).

Stillerin neden farklı göründüğünü anlayamıyorum. Normalde, Firefox'un sadece kabul edilmeyi ihmal ettiğine dair bazı kurallar vardır ve diğerleri bunu belirtmelidir. Ama burada neden bu şekilde görüntüleniyor anlamıyorum. Özellikle, kullanıcıların iletişim bilgilerini girebildikleri formun alt alanına atıfta bulunup formu gönderin. Tutarsızlık ile ilgili referans için ekran görüntüleri ekleyeceğim.

İşte URL bu yüzden kendi kendine kontrol etmek için çekinmeyin. Bu bir üretim sayfası (önceden yayımlanmış) olması tavsiye edilmesine rağmen, formu denerseniz, CURE'nin iletişim veritabanına eklenir. düğmesine alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

göndermek için garip değişim -

Firefox (Ben bakmak niyetinde yön) alt text http://static.helpcurenow.org/images/test/firefox.jpg

Krom ve ardından Safari: Burada

http://www.helpcurenow.org/survey2010

ekran görüntüleri var

Bir bonus olarak, eğer birisi IE7'de neden que'nin ardındaki arka planı göstermek istemiyorsa bana yardım etmek isterse sadece stions ve nasıl düzeltileceğini çok fazla zorlayacağım!

Çok teşekkürler.

Answer 1

<ol> adresiniz kapalı değildir, bu da webkit'in kodunuzu düzeltmek amacıyla <fieldset> içindeki gönderme düğmesini açar.

Answer 2

browser reset css kullandınız mı? Farklı tarayıcılar çeşitli öğeler için farklı varsayılan stillere sahiptir; sıfırlama CSS, tüm tarayıcılarda benzer görünecek şekilde tüm bu varsayılan stilleri sıfırlar.

Answer 3

FF ve Webkit tarayıcılarında birkaç fark var, özellikle de formlarla karşılaştım!

İki tarayıcımı CSS Browser Selector komut dosyasıyla hedeflemek için CSS'yi bölerek çözdüm. Harika çalışanlar, Webkit için farklı şeyler ayarla ve her şeyi düzelt.

Yayınlamak için canlı bir örnek veya kaynak kodunuz var mı, böylece IE7 sorunlarınızda size daha fazla yardımcı olabiliriz?

Bu yardımcı olur umarım.

Düzenleme:

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

Sizin <ol> ikinci komut etiketinden sonra kapatılmamıştır.

Answer 4

Belirli css kurallarını -moz unutmuş olabilirsiniz.Örneğin

- ayrıca Web Müfettiş adlı bir Kundakçı benzeri araç, sahip kutu boyutlandırma size -moz-box-boyutlandırma