फ़ॉन्ट के आधार रेखा के लिए माउस को संरेखित करना

शुभ दोपहर इस छोटे लेख में मैं आपको बताऊंगा कि फॉन्ट बेसलाइन पर आइकनों को क्रॉस-ब्राउज़र कैसे करें। तो, पहली नज़र में कार्य बहुत तुच्छ है: डिज़ाइनर ने जो लेआउट भेजा है, उसमें निम्न, बहुत मानक, ब्लॉक है (उपयोगकर्ता के लॉग इन साइट में लॉग इन करने के बाद हेडर में उपयोगकर्ता नाम)





बिना किसी हिचकिचाहट के, हम एक सरल मार्कअप लिखते हैं और इसे सीएसएस करते हैं:

एचटीएमएल

<div class="user"> <span class="user-icon"></span> <span class="user-name">User Name</span> </div> 

सीएसएस

 .user-icon { width: 23px; height: 20px; background: url('person.png'); display: inline-block; margin-right: 3px; } .user-name { font-size: 14px; } 

उसके बाद, हम सभी ब्राउज़रों में पृष्ठ को खोलते हैं और देखते हैं कि सब कुछ हर जगह काम करता है, क्योंकि सभी इनलाइन और इनलाइन ब्लॉक तत्व डिफ़ॉल्ट रूप से फ़ॉन्ट के आधार रेखा के साथ संरेखित होते हैं। हालांकि, IE हमेशा की तरह एक आश्चर्य प्रस्तुत करता है। मैं समझता हूं कि IE6 पहले से ही अंधेरे में सांस ले रहा है, लेकिन अभी तक हमें IE7 के साथ विचार करना है, और बस उपरोक्त कोड को निम्नानुसार प्रदान किया गया है:



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

 <div class="user"> <span class="user-icon"><span></span></span> <span class="user-name">User Name</span> </div> 

वह सब है। आपका ध्यान देने के लिए धन्यवाद।

Upd। 1

उन लोगों के लिए जो समझ में नहीं आते हैं कि आइकन को एक अलग तत्व के रूप में क्यों रखा गया है, और न केवल पाठ के साथ एक स्पैन के रूप में, मैं समझाता हूं:

1. सबसे पहले, पृष्ठभूमि के साथ निर्णय लाइन की ऊंचाई पर निर्भर करता है। यदि आइकन की ऊंचाई रेखा की ऊंचाई से अधिक है, तो इसे क्रॉप किया जाएगा। और लाइन की ऊंचाई एक ऐसा मूल्य है जिसे आप कभी भी 100% सुनिश्चित नहीं कर सकते हैं; विभिन्न स्थितियों में, विभिन्न ब्राउज़रों में, विभिन्न प्लेटफार्मों पर, इसकी गणना पूरी तरह से अलग तरीके से की जा सकती है।

2. दूसरी बात, लाइन की ऊंचाई फ़ॉन्ट आकार और हेडसेट पर निर्भर करती है। इसलिए, यदि उपयोगकर्ता ने अचानक अपनी सेटिंग्स में फ़ॉन्ट आकार बदल दिया, तो आपकी सभी स्थिति तुरंत नरक में जाएगी।