ऑफ़सेट

Question

के साथ क्रोम असंगत रेंडरिंग तत्व मैंने वेबसाइट पर काम किया और साइट को उत्तरदायी बनाने के लिए स्वर्गीय मीडिया प्रश्नों का इस्तेमाल किया।

लेकिन मैं क्रोम में बहुत अजीब त्रुटियों का अनुभव है, जहां यह (गलत स्थिति में तत्वों प्रतिपादन लगता है कि यह सही करने के लिए पेज में कई तत्वों संरेखित कर रही है है।

मैं गलत संरेखण का स्क्रीनशॉट संलग्न होगा। जैसा कि आप देख सकते हैं कि टॉप-बार में टेक्स्ट लाइनों से परे चला जाता है। बीच में प्रत्येक तत्व जो सामान्य रूप से केंद्रित होता है, दाएं से ऑफसेट होता है। इसके अलावा नीचे की बार में यह टेक्स्ट तत्वों को फेंक रहा है जो आम तौर पर शीर्ष पर एक दूसरे के बगल में होते हैं प्रत्येक की।

वेबसाइट को ऑनलाइन देखने के लिए https://tunepitch.com/। अजीब चीज यह है कि क्रोम कभी-कभी गलत करता है लेकिन बहुत समय यह सही दिखाता है । यह खिड़की खींचकर दूर जा सकता है लेकिन ब्राउज़र को मारने और इसे पुनरारंभ करने के लिए एक और अधिक प्रभावी तरीका है।

क्या किसी को पता है कि क्रोम को यह समस्या क्यों है और यह मेरे सीएसएस में क्या कारण बन रहा है?

मैं क्या करने की कोशिश की: Chrome डेवलपर टूल में

• चेक लेखा परीक्षा
• निरीक्षक में संशोधित शैली चर
• अक्षम कैश
• अक्षम जावास्क्रिप्ट

अद्यतन

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

अद्यतन 2 जावास्क्रिप्ट के साथ स्पष्ट रूप से कहें बंद चालू समस्या अभी भी होती है। मैं इस समस्या के लिए एक सरल टेस्टकेस बनाने की कोशिश की, लेकिन समस्या इतनी असंगत है कि मैं इसे एक साधारण सीएसएस ब्लॉक पर नहीं डाल सकता।

मैं विंडोज 8.1 पर क्रोम 31.0.1650.57 का उपयोग कर रहा हूं। मेरे क्लाइंट विंडोज में से एक का उपयोग करता है 7.0.066.57 के साथ संयोजन में भी

अद्यतन 3 मुझे एक वीडियो लाइव मिला जो समस्या की अजीबता दिखा सकता है। आप क्रोम खोलने के लिए पहली बार देख सकते हैं कि यह सही है, मैं इसे बंद करने और इसे फिर से खोलने के लिए और सब कुछ गलत तरीके से खोला गया है। जब मैं तो तत्व सब कुछ सही स्थिति के लिए कूदता का निरीक्षण किया (यह ऐसा नहीं करती है हमेशा youtube link

अद्यतन 4 @SetSailMedia है सही है क्रोम में एक svg फ़ॉन्ट का उपयोग किया गया था। क्या अजीब है कि है मैंने इस फ़ॉन्ट को कुछ अन्य वेबसाइटों में इस्तेमाल किया और कभी भी इस समस्या को नहीं देखा। मैंने अपने स्वयं के होस्ट किए गए फ़ॉन्ट के बजाय Google के वेबफोंट से फ़ॉन्ट लोड करने के लिए वापस बदल दिया। जिससे फ़ॉन्ट फिर से बदसूरत हो जाता है लेकिन यह तत्वों के गलतीकरण से बेहतर समाधान है।

Answer 1

ऐसा लगता है कि एसवीजी फोंट क्रोम में एक समस्या है। जैसा कि टिप्पणीकर्ता @ वेसाबी in this google group द्वारा इंगित किया गया है। मैंने आपके लिंक का परीक्षण किया और फ़ॉन्ट को एक गैर-एसवीजी फ़ॉन्ट में बदल दिया और यह काम करता प्रतीत होता है।

सत्रों के भीतर आपकी असंगतता का कारण यह है कि कभी-कभी फ़ॉन्ट तत्वों की गणना से पहले लोड किया जाता है और कभी-कभी अनुरोधों के अनुसार अनुरोधों को पूरा करने के बाद।

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

क्रोम को उदाहरण के लिए चुनिंदा बक्से में एसवीजी फ़ॉन्ट्स को प्रस्तुत करने में भी समस्याएं हैं। मूल प्रश्न और बग रिपोर्ट देखने के लिए।

Original svg problem with select boxes

Google bug report

Answer 2

आप एरिक मेयेर द्वारा सीएसएस रीसेट जो विभिन्न ब्राउज़र को रेंडरिंग के बीच सभी विसंगति दूर करेगा उपयोग करने का प्रयास कर सकते हैं। नीचे दिया गया कोड यहां दिया गया है:

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}