पृष्ठभूमि छवि स्पैन टैग में दिखाई नहीं दे रही है

Question

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

क्षमा करें अगर यह अस्पष्ट लगता है तो मैं इसे समझ नहीं पा रहा हूं, छवियों को मूल रूप से कोई ऊंचाई निर्दिष्ट नहीं किया गया था और आईव ने उन्हें gifs बनाया और ऊंचाई लागू की।

<span class="design">Design Viz</span> 
<style> 
.design { 
    background:url(_includes/images/agenda-design.gif) no-repeat top left; 
    display: inline-block; 
    height: 17px; 
    padding-left:25px; 
} 
</style> 

Answer 1

पृष्ठभूमि छवि सीएसएस संपत्ति केवल पृष्ठभूमि के रूप में एक छवि डालता है। ऑब्जेक्ट की चौड़ाई और ऊंचाई हमेशा सीएसएस/इनलाइन स्टाइल के माध्यम से स्थिर सेटिंग्स द्वारा या इसमें प्रदर्शित सामग्री के वास्तविक आकार द्वारा परिभाषित की जाती है। आपके मामले में, चूंकि आपने अपने टैग के बीच कोई सामग्री नहीं जोड़ा है, इसलिए इसका x/y आयाम 0 होगा, लेकिन पृष्ठभूमि के साथ कोई बग नहीं है। यह वहां है, केवल तब तक आप इसे तब तक नहीं देख सकते जब तक आप तत्व के लिए आकार (किसी भी तरह) परिभाषित नहीं करते।

<span class="design">Design Viz</span> 
.design { 
padding-left:25px; 
background:url(_includes/images/agenda-design.gif) no-repeat top left; 
display: inline-block; 
height: 17px; 
width: 50px; 
} 

जहां 50 आपके मामले के लिए उपयुक्त कोई उपयोगी मूल्य हो सकता है।

Answer 2

जोड़ें चौड़ाई: अपने सीएसएस शैली के लिए भी 17px (या जो भी यह है चौड़ाई)

Answer 3

डिस्प्ले: इनलाइन-ब्लॉक; आईई 7 द्वारा समर्थित नहीं है। आप को जोड़कर इसे ठीक कर सकते हैं:

.design { 
    padding-left:25px; 
    background:url(_includes/images/agenda-design.gif) no-repeat top left; 
    display: inline-block; 
    height: 17px; 
    width: 50px; 
    zoom: 1; 
    *display:inline; 
} 

Answer 4

आप निर्धारित नहीं कर सकते विशेषताओं no-repeat top left यदि आप पृष्ठभूमि छवि घोषणा करते हैं। background-image में आपको केवल अपनी छवि में लिंक सेट करना होगा।

या आप background इस तरह इस्तेमाल कर सकते हैं:

background: url(...) no-repeat top left 

Answer 5

उपयोग गद्दी

तरह

padding-left:25px; 
    padding-top: 6px; 
    padding-bottom: 10px; 
    padding-right: 5px;