में अलग-अलग प्रतिपादन पूर्व शब्द: शुरुआत में मैंने केवल विंडोज़ को ध्यान में रखा, लेकिन मैक एयर पर थोड़ी देर के परीक्षण के बाद, एहसास हुआ कि यह और भी बदतर है। हालांकि वास्तविक कोड में यह इतनी परेशानी नहीं है, हालांकि कुछ असंगतता है।सीएसएस लाइन-ऊंचाई आईई, सफारी और क्रोम
यहाँ परीक्षण http://jsbin.com/ehegaj/6/edit
संक्षेप में, क्या हो रहा है है। मेरे पास हेडर हैं जहां मैंने line-height प्रॉपर्टी लागू की है, यह हमेशा एक लाइन हेडर होता है इसलिए मैंने फोंट के लिए सही फिट होने के लिए ऊंचाई को लॉक कर दिया। विभिन्न ब्राउज़रों (और ओएस) में आप टेक्स्ट को अलग-अलग तरीके से देख सकते थे। क्या कोई विचार है कि इसे कैसे काम किया जाए?
यूपीडी: यहां http://jsbin.com/uzucuf/1/edit मेरे द्वारा किए गए वास्तविक काम का बहुत करीबी उदाहरण है, फिर यह ऊपर नमूना परीक्षण के रूप में इतना बुरा नहीं है, लेकिन फिर भी पिक्सेल चल रहा है।
UPD2:
अधिक विंडोज 7 पर ज्यादातर ध्यान केंद्रित परीक्षण किया, और अलग अलग लाइन ऊंचाइयों के साथ विभिन्न ब्राउज़रों में परीक्षण स्क्रीनशॉट के साथ छवि वहाँ शामिल है। आप उनके बीच दृष्टिहीन असंगतता देख सकते थे।
http://imageshack.us/a/img845/6734/testheaders.png
यह 1px के बारे में है, इसलिए व्यावहारिक रूप से मैं लाइन heeight 29px का उपयोग कर और IE के लिए अलग लाइन ऊंचाई 30px की सेवा के द्वारा इसे ठीक कर सकता है। हालांकि मैं इसे 30 पीएक्स लाइन की ऊंचाई के साथ छोड़ दूंगा और सफारी को अनदेखा करूँगा, इसलिए इस बिंदु पर मैं अच्छा हूं।
तो बस उत्सुक क्यों हुआ? इस उत्सुकता से मजबूर होना विभिन्न संसाधनों को ब्राउज़ करने में कुछ घंटे बिताए:
This guy, एक ही समस्या मिलती है, लेकिन सवाल पूछने से बस छुटकारा पा रहा था।
Other person ने line-height के लिए केवल मूल्यों का उपयोग करने का सुझाव दिया जो मेरे दृष्टिकोण पर थोड़ा अजीब है :) अगर मैं यहां गलत करता हूं तो कृपया मुझे सही करें।
Some other लेकिन बिट असंबंधित विषय को पढ़ने में काफी दिलचस्पी थी।
And finaly, मुझे लगता है कि मुझे जवाब मिल गया है, यह थोड़ा धुंधला है लेकिन वास्तव में कुछ समझ में आता है। linespacing की
1. तीन सेट को महत्व देता
ट्रू टाइप और ओपन टाइप फ़ॉन्ट प्रारूपों के इतिहास में निहित अस्पष्ट कारणों के लिए, हर webfont मूल्यों linespacing के तीन सेट किया जाता है।"पुराने मैक" सेट, सिस्टम 7. में पेश वर्ष मैक ओएस में, यदि एक ग्लिफ़ के ऊपर या नीचे "पुराने मैक" linespacing लाइनों पर पहुंच गया, ग्लिफ़ खड़ी निचोड़ा किया जाएगा में फिट करने के लिए।
"पुराना विंडोज" सेट, विंडोज 3.1 में पेश किया गया, जिसमें "पुराने विंडोज़" आरोही और अवरोही रेखाओं के ऊपर या नीचे की रूपरेखा का कोई भी हिस्सा स्क्रीन पर दिखाई नहीं देगा (इसलिए ग्लिफ फसल हो जाएंगे)। एक "टाइपोग्राफिक" सेट, माना जाता है कि अन्य दो सेटों की सीमाओं से मुक्त है।
समस्या यह है कि, हालांकि, कई विंडोज अनुप्रयोग अभी भी "पुराने विंडोज़" मानों का उपयोग करते हैं। अक्सर यह पुराने अनुप्रयोगों के साथ बनाए गए दस्तावेजों से रिफ्लो को रोकने के लिए जानबूझकर किया जाता है।मैक ओएस एक्स पर, निचोड़ नहीं होता है लेकिन अधिकांश एप्लिकेशन अभी भी "पुराने मैक" मानों का उपयोग करते हैं।
यह सामान ब्राउज़र में लाया गया है। मैक ओएस एक्स पर क्रोम विंडोज पर क्रोम की तुलना में मूल्यों के एक अलग सेट का उपयोग करता है; विंडोज 7 पर फ़ायरफ़ॉक्स विंडोज एक्सपी पर फ़ायरफ़ॉक्स की तुलना में मूल्यों के एक अलग सेट का उपयोग करता है, और विंडोज 7 पर फ़ायरफ़ॉक्स विंडोज 7 पर क्रोम की तुलना में मूल्यों के एक अलग सेट का उपयोग करता है। उसी ब्राउज़र के मैक और विंडोज संस्करण मूल्यों के विभिन्न सेट का उपयोग करेंगे, जबकि अलग एक ही ओएस पर ब्राउज़र विभिन्न मूल्यों का भी उपयोग कर सकते हैं! एक आदर्श दुनिया में, सरल समाधान यह सुनिश्चित करने के लिए फ़ॉन्ट फाउंड्री के लिए होगा कि मूल्यों के सभी तीन सेट एक ही परिणाम के लिए नेतृत्व करते हैं। लेकिन वेबफोंट की कल्पना करने से पहले कई मौजूदा फोंट बनाए गए थे, और फ़ॉन्ट निर्माण उपकरण टाइप डिज़ाइनरों के लिए इन मानों को "सही" बनाने में आसान नहीं बनाते हैं।
संक्षेप में: वहां कई फोंट हैं जिनमें लाइनस्पेसिंग मान ऑपरेटिंग सिस्टम और ब्राउज़र में असंगतता का कारण बनते हैं।
लेकिन फिर भी मुझे 100% यकीन नहीं है कि यह मामला है। क्या कोई बेहतर अनुमान लगा सकता है और बच्चे के स्पष्टीकरण की तरह, अधिक स्पष्ट उत्तर दे सकता है :)?
अजीब है, लेकिन मैं भी इस देख रहा हूँ। शायद आप जो करने की कोशिश कर रहे हैं वह क्रॉस ब्राउज़र संगतता के लिए बहुत सटीक है? क्या आप हमें बता सकते हैं कि आप क्या करने की कोशिश कर रहे हैं ताकि हम आपके लिए वैकल्पिक समाधान के साथ आने में मदद कर सकें? – zeMinimalist
धन्यवाद साइमन, मैं ग्लोबल हेडर बनाने की कोशिश कर रहा हूं, परीक्षण कोड अब तक वास्तविक नहीं है, मैं केवल फ्लोट को और अधिक ऊंचाई और लाइन ऊंचाई को जोड़ रहा हूं जो मुझे चाहिए। और इससे पहले कि यह विशेष रूप से मैक में इतनी बुरी तरह दिखता नहीं है। मैं – dmi3y
पर बाद में अधिक करीबी नमूना तैयार करूंगा, मुझे लगता है कि आपके 'एच 1' पर 'ऊंचाई' आपके लिए सबकुछ तोड़ रही है। दोबारा, आपका प्रश्न स्पष्ट नहीं है, लेकिन देखो कि यहां क्या होता है: http://jsbin.com/ehegaj/12/edit – Sparky