फ़ायरफ़ॉक्स और वेबकिट के बीच पाठ इनपुट तत्वों का असंगत ऊंचाई

Question

ठीक है, मुझे लगता है कि यह एक शाश्वत प्रश्न के बारे में कुछ है, लेकिन यहाँ जाता है:

मैं एक ही पाठ इनपुट मिल गया है,

<input type="text" name="whatever" /> 

और मैंने अपना font-family, font-size और padding निर्दिष्ट किया है। फिर भी, उसी मशीन पर भी (मेरे मैक, मान लें), फ़ायरफ़ॉक्स (3.6) में इनपुट की तुलना क्रोम या सफारी में की तुलना में अलग है। विशेष रूप से, फ़ायरफ़ॉक्स पाठ के नीचे थोड़ा और पैडिंग जोड़ता है।

और नहीं, height को पिक्सल में निर्दिष्ट करना स्थिरता प्राप्त नहीं करता है।

क्या जावास्क्रिप्ट का उपयोग किये बिना गेको- और वेबकिट-आधारित ब्राउज़र (अकेले आईई और ओपेरा) में टेक्स्ट इनपुट ऊंचाई स्थिरता प्राप्त करने का कोई तरीका है? और अगर मुझे जावास्क्रिप्ट का उपयोग करना चाहिए, तो क्या किसी ने पहले से ही एक jQuery प्लगइन तैयार किया है या आसानी से ऐसा करने के लिए कुछ किया है?

अद्यतन: यहां क्या नहीं करना है। jqTransform प्लगइन आपको त्वचा तत्वों को बनाने देता है और वादे करता है कि वे ब्राउज़र पर समान दिखाई देंगे। यहाँ कैसे डेमो इनपुट पर मेरे Mac क्रोम 5 में दिखाई देता है:

और यहाँ कैसे एक ही इनपुट फ़ायरफ़ॉक्स 3.6.4 में दिखाई देता है:

मैं इन परिवर्तित नहीं किया है किसी भी तरह से स्क्रीनशॉट, बस उन्हें फसल। अब, मेरी पहली प्रतिक्रिया है, "उह, मैं फ़ायरफ़ॉक्स का समर्थन नहीं करना चाहता हूं।" लेकिन सफारी और क्रोम उपयोगकर्ताओं की तुलना में वर्तमान में अधिक फ़ायरफ़ॉक्स उपयोगकर्ता हैं, इसलिए यह कोई विकल्प नहीं है।

कोई, कृपया मदद करें! मैं बस अपने फॉर्म आधुनिक, मानक-अनुरूप ब्राउज़र पर दिखाना चाहता हूं! और "इसे देखो," मैं चयन पर या कुछ भी outline के बारे में बात नहीं कर रहा हूं; मैं बस एक ही चौड़ाई, ऊंचाई, और पाठ प्लेसमेंट रखने के बारे में बात कर रहा हूँ!

Answer 1

ठीक है, यहां एक "समाधान" है जो मैंने वास्तव में <input type="text"> तत्वों को सफारी, क्रोम और फ़ायरफ़ॉक्स के वर्तमान संस्करणों में देखने के लिए किया है। ध्यान दें कि मैंने ओपेरा या आईई में या मैक ओएस के अलावा ऑपरेटिंग सिस्टम पर इसका परीक्षण नहीं किया है; मुझे यकीन है कि अतिरिक्त हैक्स की आवश्यकता होगी।

मैं बस एक <div> परिभाषित इनपुट के लिए पृष्ठभूमि प्रदान करते हैं और, इनपुट बस चल रहा है पाठ इनपुट ही गुण background: none, border: 0, आदि दूसरे शब्दों में देने के लिए। फिर मैं रिश्तेदार स्थिति का उपयोग करके पृष्ठभूमि पर इनपुट को स्थिति देता हूं (विशेष रूप से, इनपुट top सेट करना)। यह मुझे विभिन्न ब्राउज़रों के लिए समायोजित करने के लिए स्वतंत्र छोड़ देता है।विशेष रूप से, मैंने पाया इनपुट पाठ 1px फ़ायरफ़ॉक्स में से WebKit- आधारित ब्राउज़र में अधिक था कि, तो मैं लाइन

if ($.browser.webkit) { $input.css('marginTop', 1); } 

जोड़ा अब इनपुट अंत में वास्तव में वेबकिट और Firefox के बीच एक ही लग रहा है। यह एक हैक है, हाँ, लेकिन यह काम करता है।

Answer 2

क्या यह अन्य प्रश्न आपकी मदद करता है: Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back??

इस प्रकार, क्या आप fx 3.6 और Fx3.5- के बीच कोई अंतर देखते हैं?

Answer 3

अगर ($ .browser.webkit) {$ ("jqTransformInputInner div इनपुट।") सीएसएस ("padding-top", "10px");।}