2012-02-08 12 views
6

मुझे बटन की ऊंचाई सेट करते समय समस्या हो रही है। असल में मैं इसे क्रॉस-ब्राउजर रखने का प्रबंधन नहीं कर सकता। फ़ायरफ़ॉक्स के साथ, यह बिना किसी कारण के सामान्य से अधिक है।बटन ऊंचाई असंगतता (क्रॉस-ब्राउज़र)

Initial

और यहाँ कोड:

यहाँ यह एक स्क्रीनशॉट (फ़ायरफ़ॉक्स, सफारी और ओपेरा, इस क्रम में) है http://jsfiddle.net/TMUnS/2/

मैं भी कुछ विशिष्ट घोषणाओं मैं पर पाया जोड़ने की कोशिश की वेब, लेकिन वास्तव में उन्होंने ऊंचाई को थोड़ा कम कर दिया, लेकिन फिर भी, वे समान नहीं हैं (उसी क्रम में):

Second try

और यहां कोड: http://jsfiddle.net/TMUnS/4/

मैं इसे कैसे ठीक कर सकता हूं?

+0

अच्छा, यह बस होता है और इस सवाल को अंतहीनता से पूछा गया है। ब्राउज़र विसंगतियों के कारण अधिकांश समय इनपुट और पिक्सेल पूर्णता अच्छी तरह से मिश्रण नहीं करते हैं। मेरा सुझाव है कि आप ** normalize.css ** जैसे कुछ से शुरू करें और फिर वहां से समायोजित करें। – elclanrs

+0

मेरे पास पहले से ही रीसेट है, लेकिन ऐसा लगता है कि यह सामान रीसेट नहीं होता है। – entropid

उत्तर

10

फ़ायरफ़ॉक्स में यह मजेदार बात है जिसे -moz-focus-inner कहा जाता है। मैं पूरी तरह यकीन है कि क्या इसके लिए है नहीं कर रहा हूँ, मैं सिर्फ पता है कि तुम कभी कभी यह करने के लिए बटन व्यवहार करने के लिए प्राप्त करने की आवश्यकता:

button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner { 
    padding:0; 
    border:0; 
} 

कि हो सकता है कि तुम क्या जरूरत है। आप यहां अंतर देख सकते हैं (फ़ायरफ़ॉक्स में): http://jsfiddle.net/TMUnS/9/

+0

खैर, असल में मैंने इस संपत्ति को सेट किया है, लेकिन मैं 'पैडिंग: 0' भाग जोड़ना भूल गया, इसलिए यह ठीक से काम नहीं करता! लेकिन अब मुझे एक नई समस्या है, जिसे आप यहां देख सकते हैं: http://jsfiddle.net/TMUnS/12/। बटनों की ऊंचाई समान है, लेकिन फ़ायरफ़ॉक्स में यह लंबवत ठीक नहीं है। – entropid

+0

मुझे आपकी समस्या स्पष्ट रूप से दिखाई नहीं दे रही है। कुछ चीजों को ध्यान में रखना: 1) जिन डेमो से आपने अभी लिंक किया है उनमें '-मोज़-फोकस-इनरर' कोड नहीं है 2) आपने 'फ़ॉन्ट-फ़ैमिली' निर्दिष्ट नहीं किया है। मुझे क्रोम वीएस फ़ायरफ़ॉक्स में अलग-अलग डिफ़ॉल्ट फोंट मिलते हैं, इसलिए अलग-अलग प्रतिपादन। 3) '

+0

मुझे लगता है कि यह शौकीन निर्भर करता है। पारितोषिक के लिए धन्यवाद। :) – entropid

0

क्या आप सीएसएस-रीसेट का उपयोग कर रहे हैं? एक सीएसएस-रीसेट ब्राउज़र के लिए सीएसएस को सामान्यीकृत करता है। YUI CSS RESET

+0

मैं पहले ही एक सीएसएस रीसेट का उपयोग कर रहा हूं: http://meyerweb.com/eric/tools/css/reset/। – entropid

2

यह एक सुविधा Firefox जो बटन के line-height की सीमा में सेट है:

इस YUI रीसेट आज़माएं। यह बटन के लिए एक डिफ़ॉल्ट रेखा ऊंचाई सेट करता है - http://www.cssnewbie.com/input-button-line-height-bug/। मैं बटन के लिए एक निश्चित ऊंचाई का उपयोग करके और पैडिंग के साथ खेलना चाहता हूं।

+0

हाँ, यह सबसे अच्छा है जो आप कर सकते हैं। पाठ को लंबवत रूप से केंद्रित करने के लिए निश्चित ऊंचाई और समान रेखा-ऊंचाई। मैंने इस तकनीक का उपयोग खोज बटन के साथ किया है जो पाठ इनपुट को स्पर्श करता है, इसलिए यह महत्वपूर्ण है कि यह सभी ब्राउज़रों में सुसंगत दिखता हो। – elclanrs