2011-07-08 17 views
5

के साथ सीएसएस लेआउट परिवर्तन निम्नलिखित HTML मार्कअप पर विचार करें। मैंने जिन अधिकांश ब्राउज़रों का परीक्षण किया है, उनमें दूसरी सूची अलग-अलग प्रदर्शित होती है (प्रत्येक सूची आइटम इंडेंट किया जाता है)।फ़ॉन्ट लेआउट

दो सूचियों के बीच एकमात्र अंतर सीएसएस फ़ॉन्ट-स्टाइल प्रॉपर्टी से संबंधित है, जिसे मैं सूची लेआउट बदलने की उम्मीद नहीं करता। क्या इस व्यवहार के लिए कोई स्पष्टीकरण है? जबकि इटैलिक पाठ span19 पिक्सल बलों

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      body {font-family: sans-serif} 
      span {float: left} 
      ul.bad span {font-style: italic} 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
     </ul> 
     <ul class="bad"> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
     </ul> 
    </body> 
</html> 
+1

क्या ब्राउज़र? लेआउट अलग कैसे है? मुझे इटालिकाइज्ड टेक्स्ट के लिए सहेजे गए कोड के साथ फ़ायरफ़ॉक्स में कोई फर्क नहीं पड़ता। – Jrod

+1

यह सुनिश्चित नहीं है कि इसका क्या कारण है, लेकिन 'span {float: left}' को हटाकर इंडेंटेशन समस्या ठीक हो जाएगी। – kei

+0

@Jrod - मैं एफएफ 5. –

उत्तर

4

सीधे पाठ के साथ अवधि span, 18 पिक्सेल ऊंचाई में हो जाता है।

float: left का उपयोग करते समय यह थोड़ा अलग व्यवहार का कारण बनता है।

 span // <-- height: 18px; 
.bad span // <-- height: 19px; 

एक त्वरित सुधारline height संपत्ति दोनों अवधि प्रकार के लिए बराबर सेट करने के लिए होगा:

span {float:left; line-height:15px;} 

अपने कोड के इरादों के बारे में नहीं;)

+0

में नीचे सूचीबद्ध सूची (प्रत्येक क्रमिक foo आगे दाएं) देख रहा हूं बस मैंने खुद को कोशिश की, और रेखा-ऊंचाई को 15px कार्यों में सेट किया; इसे एक बड़े मान पर सेट करें (कहें, 35 पीएक्स) दोनों सूचियों में चौंकाने वाला कारण बनता है। –

+0

बहुत दिलचस्प, उत्तर के लिए धन्यवाद। ऐसा लगता है कि मुझे समझने के लिए मेरे पास थोड़ा सा पढ़ना है _hyhy_ यह मामला है। :) –

0

शायद sans-serif ब्राउज़र द्वारा चुने गए फ़ॉन्ट में अलग इटालिक (या कोई इटालिक्स नहीं है)। इसके बजाय वर्डाना जैसे विशिष्ट फ़ॉन्ट का चयन करने का प्रयास करें और देखें कि

0

लेआउट "सैन्स-सेरिफ़" प्रतिस्थापन के लिए उपयोग किए जाने वाले वास्तविक फ़ॉन्ट्स पर निर्भर करेगा। तो आपको उचित फ़ॉन्ट नाम चुनना होगा।

मुझे विंडोज़ (7) पर सभी प्रमुख ब्राउज़रों में कोई अंतर नहीं दिखता है, देखें: http://jsfiddle.net/uTjSd/ ऐसा लगता है कि "सैन्स-सेरिफ़" उन सभी में "एरियल" के लिए हल हो गया है।

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