टेक्स्ट-छाया

का उपयोग करते समय फ़ायरफ़ॉक्स और क्रोम में अलग-अलग पंक्ति-ऊंचाई कुछ कारणों से, टेक्स्ट-छाया का उपयोग करते समय फ़ायरफ़ॉक्स और क्रोम लाइन-ऊंचाई को अलग-अलग प्रस्तुत करते हैं।टेक्स्ट-छाया

सीएसएस:

#tracker { 
    width:200px; 
    color:#999; 
    font:normal 12px Verdana,sans-serif;/* Swapped out Arial with Verdana */ 
} 

#tracker ol { 
    float: right; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    list-style: none; 
} 

#tracker li { 
    float: left; 
    margin: 0 0 0 6px; 
    padding: 0; 
    height: 13px; 
    width: 13px; 
    color: #666; 
    background-color: #ccc; 
    border: 1px solid #c0c0c0; 
    border-radius: 9px; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    text-align: center; 
    line-height: 13px; 
    font-size: 9px; 
    text-shadow: 1px 1px 1px #fff; 
    overflow: hidden; 
} 

#tracker li.current { 
    color: #fff; 
    text-shadow: -1px -1px 1px #033e69; 
    font-weight: bold; 
    background-color: #13699e; 
    border: 1px solid #369; 
} 
#tracker li span{display:none;} 
#step1:before{content:"1"} 
#step2:before{content:"2"} 
#step3:before{content:"3"} 
#step4:before{content:"4"}

HTML:

<div id="tracker"> 
    <span class="steps">Steps <span id="current-step">1</span> of 4</span> 
    <ol> 
     <li id="step1" class="current"><span>Sender</span></li> 
     <li id="step2" class="future"><span>Recipient</span></li> 
     <li id="step3" class="future"><span>Delivery info</span></li> 
     <li id="step4" class="future"><span>Line items</span></li> 
    </ol> 
</div>

जब पाठ छाया पाठ (सकारात्मक संख्या) से कम है यह पाठ प्रेस।

Tracker-webkit-firefox

पाठ चाहे कहीं छाया प्रदान की गई है एक ही होना नहीं करना चाहिए? (जैसा कि एफएफ और आईई में दिखाया गया है?)

छाया के नीचे (सकारात्मक संख्याओं का उपयोग करके) लाइन-ऊंचाई (13px से 15px तक) को बढ़ाने के लिए केवल एक ही काम है, लेकिन फिर यह इसे खराब करता है गैर-वेबकिट ब्राउज़र (फ़ायरफ़ॉक्स और आईई) के लिए।

Demo of the problem ... कोई विचार?

अद्यतन: मैंने इसे समझ लिया और अपना कोड अपडेट किया है। यह एक फ़ॉन्ट मुद्दा था। मैं एरियल का उपयोग कर रहा था लेकिन जब मैंने इसे वर्दाना में बदल दिया तो समस्या हल हो गई। बहुत अजीब!

The solution! :)

स्रोत

2012-05-19 Richard Harris

अपने प्रश्न अपडेट करने से बचें कृपया, लेकिन इसके बजाय समाधान चित्रित करने के लिए एक जवाब जोड़ें। संपादन को पिछले राज्य में वापस लाएं ताकि प्रदान किए गए कोड के साथ समस्या फिर से देखी जा सके। –

चूंकि मेरे पास 100 से कम प्रतिष्ठा है, इसलिए सिस्टम मुझे आठ घंटे तक उत्तर देने नहीं देगा। मैंने अब एक उत्तर (नीचे) जमा कर दिया है, लेकिन यह मुझे इसे छह घंटे के लिए समाधान के रूप में स्वीकार नहीं करेगा। समस्या अभी भी मेरे ओपी में है, "समस्या का डेमो" के रूप में जुड़ा हुआ है और मैंने जो कोड बदल दिया था उसमें टिप्पणी की थी (फ़ॉन्ट, एरियल से वर्दान तक)। क्या वह पर्याप्त नहीं है? –

पर्याप्त से अधिक, समुदाय आपको धन्यवाद :) –

यह 10px से नीचे के आकारों पर प्रदान किए जाने पर एरियल और हेल्वैटिका फोंट के साथ एक मुद्दा प्रतीत होता है। वर्डाना में फ़ॉन्ट को बदलना समस्या को हल करता है।

कोड मैं बदलना पड़ा का ही हिस्सा सीएसएस में निम्नलिखित घोषणा था:

#tracker { 
    /* from this... 
    font:normal 12px Arial,Helvetica,sans-serif;*/ 
    /* to this...*/ 
    font: normal 12px Verdana, sans-serif; 
}

The solution! :)

वैकल्पिक रूप से, यह भी अगर आप बड़े का उपयोग काम करता है एरियल या हेल्वैटिका के लिए फ़ॉन्ट आकार, as demonstrated here। (लेकिन फिर आपको 13px से 14px तक चरण-मंडलियों की ऊंचाई & चौड़ाई बढ़ाने की आवश्यकता है।)

यहाँ बड़ा फ़ॉन्ट संस्करण के लिए सीएसएस है, एरियल या Helvetica का उपयोग कर:

#tracker { 
    /* this has changed */ 
    font: normal 14px Helvetica, Arial, sans-serif; 
    /* the rest is the same as before */ 
    width: 200px; 
    color: #999; 
} 

#tracker ol { 
    float: right; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    list-style: none; 
} 

#tracker li { 
    /* these were changed */ 
    height: 14px; 
    width: 14px; 
    font-size: 11px; 
    /* the rest is the same as before */ 
    float: left; 
    margin: 0 0 0 6px; 
    padding: 0; 
    border: 1px solid #c0c0c0; 
    border-radius: 9px; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    text-align: center; 
    line-height: 1.45em; 
    color: #666; 
    background-color: #ccc; 
    text-shadow: 1px 1px 1px #fff; 
    overflow: hidden; 
} 

#tracker li.current { 
    color: #fff; 
    text-shadow: -1px -1px 1px #033e69; 
    font-weight: bold; 
    background-color: #13699e; 
    border: 1px solid #369; 
} 

#tracker li span { 
    display: none; 
} 

#step1:before { 
    content: "1" 
} 

#step2:before { 
    content: "2" 
} 

#step3:before { 
    content: "3" 
} 

#step4:before { 
    content: "4" 
}

स्रोत

2012-05-21 06:39:58

पाठ रिश्तेदार इकाइयों में लाइन ऊंचाई निर्दिष्ट करने प्रतिपादन इंजन में संगत व्यवहार प्रदान करेगा।

आप के लिए कंटेनर-ऊंचाई की गणना पाठ-ऊंचाई संबंध:

13/9 = 1,444 ~

... और सीएसएस में प्रासंगिक नियम है कि लागू होते हैं:

#tracker li { 
    line-height: 1.444; 
}

Demo on jsFiddle

स्रोत

2012-05-19 14:08:44

वाह। यह बिल्कुल अद्भुत काम है! बहुत बहुत धन्यवाद! –

यकीन है, कोई पसीना नहीं। –

बकवास। मैंने जल्द ही बात की। यह शानदार था, लेकिन दुर्भाग्यवश उसने मेरे लिए समस्या का समाधान नहीं किया है (भले ही मैं इसे jsFiddle पर काम करता हूं)। मेरे सीएसएस में कुछ और होना चाहिए जो समस्या पैदा कर रहा है ... –

उत्तर

संबंधित मुद्दे