वेबकिट ब्राउज़र मोज़िला फ़ायरफ़ॉक्स से अलग सीएसएस प्रस्तुत करते हैं ... क्यों?

Question

मैं पहले से ही एक फॉर्म स्टाइल कर रहा हूं (कुछ मार्कअप परिवर्तन किए हैं), और मैं आमतौर पर फ़ायरफ़ॉक्स में स्टाइल में काम करता हूं ताकि मैं फायरबग और वेब डेवलपर टूलबार का उपयोग कर सकूं।

इस प्रोजेक्ट पर, मैंने देखा कि मेरी शैली फ़ायरफ़ॉक्स की तुलना में वेबकिट आधारित ब्राउज़र क्रोम और सफारी में एक विशेष क्षेत्र (कई तत्व) के लिए काफी अलग दिख रही है (हम इंटरनेट एक्सप्लोरर में भी नहीं पहुंच पाएंगे, हालांकि यह है फ़ायरफ़ॉक्स डिस्प्ले के साथ साइडिंग)।

मैं यह नहीं समझ सकता कि शैलियों इतनी अलग क्यों प्रदर्शित हो रही हैं। आम तौर पर कुछ नियम है कि मैं उपेक्षा कर रहा हूं कि फ़ायरफ़ॉक्स केवल स्वीकृत होता है, और दूसरों को इसे निर्दिष्ट करने की आवश्यकता होती है। लेकिन यहां मुझे नहीं मिल रहा है कि यह इस तरह क्यों प्रदर्शित हो रहा है। विशेष रूप से मैं उस फॉर्म के निचले क्षेत्र का जिक्र कर रहा हूं जहां उपयोगकर्ता अपनी संपर्क जानकारी दर्ज कर सकते हैं, फिर फॉर्म जमा करें। मैं विसंगति के संदर्भ में संदर्भ के लिए स्क्रीन शॉट संलग्न करूंगा।

यहां यूआरएल है इसलिए इसे स्वयं जांचने के लिए स्वतंत्र महसूस करें। हालांकि सलाह दी जाती है कि यह एक उत्पादन पृष्ठ है (पहले ही जारी किया गया है) ताकि यदि आप फॉर्म को आज़माएं, तो आपको CURE के संपर्क डेटाबेस में जोड़ा जाएगा।

http://www.helpcurenow.org/survey2010

यहाँ स्क्रीन शॉट्स है:

फ़ायरफ़ॉक्स (तरह से मैं यह देखने के लिए इरादा) alt text http://static.helpcurenow.org/images/test/firefox.jpg

क्रोम, और फिर Safari - अजीब परिवर्तन बटन alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

प्रस्तुत करने के लिए

बोनस के रूप में, अगर कोई मुझे यह समझने में मदद करना चाहता है कि पृथ्वी पर क्यों आईई 7 क्यू के पीछे पृष्ठभूमि नहीं दिखाना चाहता केवल stions, और कैसे ठीक करने के लिए मैं बहुत बाध्य होगा!

बहुत बहुत धन्यवाद।

Answer 1

आपका <ol> बंद नहीं है, जो वेबकैट को आपके कोड को ठीक करने के प्रयास में <fieldset> के अंदर सबमिट बटन डाल देता है।

Answer 2

क्या आपने browser reset css का उपयोग किया है। विभिन्न ब्राउज़रों के पास विभिन्न तत्वों के लिए अलग-अलग डिफ़ॉल्ट शैलियों हैं, रीसेट सीएसएस इन सभी डिफ़ॉल्ट शैलियों को रीसेट करता है ताकि सामान सभी ब्राउज़रों में समान दिखता हो।

Answer 3

एफएफ और वेबकिट ब्राउज़र में कुछ मतभेद हैं, मैंने उन्हें भी सामना किया है, खासकर रूपों के साथ!

मैंने CSS Browser Selector स्क्रिप्ट के साथ दो ब्राउज़रों को लक्षित करने के लिए अपने सीएसएस को विभाजित करके हल किया। काम करने वाले चमत्कार, बस वेबकिट के लिए कुछ चीजें अलग-अलग सेट करें और पूरी चीज को ठीक करें।

क्या आपके पास पोस्ट करने के लिए एक लाइव उदाहरण या कुछ स्रोत कोड है ताकि हम आपके आई 7 मुद्दों के साथ भी आपकी मदद कर सकें?

उम्मीद है कि मदद करता है।

संपादित करें:

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

आपका <ol> दूसरी स्क्रिप्ट टैग के बाद बंद नहीं किया गया है।

Answer 4

आप भूल गए हैं -मोज़ विशिष्ट सीएसएस नियम।

उदाहरण के लिए - बॉक्स आकार आप -moz-बॉक्स आकार