सीएसएस जो केवल क्रोम पर लागू होता है?

Question

यह मेरी साइट है: http://portable-ebook-reader.net

शीर्ष पर खोज बार दो पृष्ठभूमि छवियों से बना है। एक वह है जहां आप खोज वाक्यांश में टाइप करेंगे, दूसरा खोज करने के लिए वास्तविक बटन है।

मेरी समस्या यह है कि क्रोम में खोज बटन छवि 2px बहुत अधिक है। लेकिन यह आईई और एफएफ में सही दिखता है। और यदि मैं सीएसएस (मार्जिन-टॉप: 2 पीएक्स) संशोधित करता हूं तो क्रोम अच्छा दिखता है लेकिन आईई और एफएफ गड़बड़ हो जाते हैं।

कोई विचार? मैं बिना किसी किस्मत के घंटों की खोज कर रहा हूं।

धन्यवाद!

Answer 1

इसे पहले एफएफ के लिए सही लग रहा है। फिर इसे एफएफ और क्रोम दोनों के लिए सही लग रहा है। एफएफ और क्रोम में सही दिखने के बाद, क्या आप आईई में यह कैसे दिखते हैं इसके बारे में खुद से संबंधित होना चाहिए। इसे प्राप्त करने के बाद, यदि आवश्यक हो, तो IE के लिए एडजस्ट करना प्रारंभ करें, * का उपयोग करके अपने स्टाइल नियमों से पहले, उदाहरण: *margin-top:2px; आईई 7 और आईई 6 के लिए शीर्ष मार्जिन को समायोजित करता है।

अपने कोड को देखने के बाद, यह कहना मुश्किल है कि समस्या के कारण मेरे सिस्टम पर विभिन्न समाधानों का परीक्षण किए बिना समस्या का कारण क्या हो सकता है।

• दोनों के लिए एक ही ऊँचाई मान लागू: लेकिन यहाँ कुछ चीजें हैं जो समस्या ठीक हो सकती आप (आपके 'विषयों' फ़ोल्डर के भीतर अपने 'क्रॉनिकल' फ़ोल्डर में स्थित) अपने styles.css फ़ाइल में परिवर्तित करने का प्रयास कर सकते हैं अपने #s और #searchsubmit नियम सेट
• से #searchsubmit
• हटाने font: 14px "century gothic", Arial, Helvetica, sans-serif; के बाद आप ऊपर करते हैं, अगर यह अभी भी दोनों एफएफ और क्रोम में सही नहीं लगता है, अपने #s नियम-सेट के लिए पहले और दूसरे गद्दी मूल्यों को निर्धारित 0 (यानी 8px से 0px में बदलें) और फिरजोड़ें दोनों #s और #searchsubmit कोघोषणा और देना दोनों एक ही मूल्य है, उदाहरण के margin-top:8px;
• के लिए अगर आप अभी भी समस्या आ रही है, इस लाइन कॉपी करके देखें: अपने #s नियम-सेट से font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; और अपने #searchsubmit तो नियम-सेट में जोड़ने यह दोनों नियम-सेट में दिखाई देता है।

ऐसी कई अलग-अलग संभावनाएं हैं जो समस्या पैदा कर सकती हैं, यही कारण है कि आप उपरोक्त हैक में से किसी एक को आजमा सकते हैं यदि आप समस्या का स्रोत नहीं समझ सकते हैं।

Answer 2

आप यह देखने के लिए जांच सकते हैं कि navigator.appVersion में "क्रोम" शब्द है और जावास्क्रिप्ट के माध्यम से उस जोड़े की सापेक्ष स्थिति को दो पिक्सेल नीचे सेट करें।

if (navigator.appVersion.indexOf("Chrome/") != -1) { 
// modify button 
} 

Answer 3

अपने डॉक्टरेट को सख्त रूप से बदलने का प्रयास करें - जो कुछ भी काम करता है, वह ज्यादातर तीन प्रमुख ब्राउज़रों में समान रूप से काम करना चाहिए। अधिकतर।

Answer 4

बस एक संदर्भ के रूप में, a list of all possible browser specific CSS hacks। हालांकि मैं उन हैक्स के उपयोग को हतोत्साहित करता हूं, लेकिन यह आपकी समस्या के लिए त्वरित समाधान के अनुरूप हो सकता है।

Answer 5

कि .webkit की तरह अपने शरीर टैग, .chrome आदि जो आप इस प्रकार आपके स्टाइलशीट में उपयोग कर सकते हैं करने के लिए कक्षाओं में कहते हैं http://rafael.adm.br/css_browser_selector/

थोड़ा js फ़ाइल पर एक नजर डालें।

Answer 6

सीएसएस कि केवल वेबकिट ब्राउज़रों (क्रोम और सफारी) के लिए लागू होगी का उपयोग करें:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; } 
    #s { margin-top: 5px; } 
} 

एक बदसूरत हैक लेकिन यह उन निराशा प्रतिपादन समस्याओं के लिए काम कर सकते हैं।

Answer 7

मुझे कुछ हफ्ते पहले यह चाल मिली और ऐसा लगता है कि यह सभी ब्राउज़रों में समान रूप से काम करता है।

एक ही ग्राफिक बनाएं जिसमें आपकी खोज बार और खोज बटन दोनों शामिल हों। इसे सीएसएस स्टाइल के माध्यम से अपने फॉर्म की पृष्ठभूमि बनाएं। फिर अपने टेक्स्ट इनपुट को समायोजित करें और बटन (संभवतः कक्षाओं या आईडी के माध्यम से) सबमिट करें {सीमा: 0; पृष्ठभूमि: पारदर्शी} और फिर अपने फॉर्म पृष्ठभूमि के लेआउट को फिट करने के लिए फॉर्म तत्वों की ऊंचाई और चौड़ाई समायोजित करें। मैंने पहले < इनपुट प्रकार = "छवि" .../> का उपयोग किया था, लेकिन संरेखण को कभी भी सही नहीं मिला, इससे कोई फर्क नहीं पड़ता कि मैंने इसे कैसे स्टाइल किया या गद्दी दी। यह विधि फॉर्म तत्वों के मार्जिन, पैडिंग और पूर्ण स्थिति के पहले समायोजन के बाद सही तरीके से काम करती है, यदि आपको आवश्यकता हो तो आप परीक्षण के दौरान दिखाई देने वाली सीमाओं को छोड़ना चाहेंगे ताकि आप इसे ठीक से रख सकें)।

मुझे अपनी खोज सबमिट बटन पर कभी भी {कर्सर: पॉइंटर;} डालने के लिए आसान लगता है और कभी-कभी अन्य फॉर्म इनपुट भी एक दृश्य सुराग देने के लिए लगता है कि यह एक सबमिट करने योग्य फ़ॉर्म है और लोगों को क्लिक करने के लिए प्रोत्साहित किया जाता है।