2011-10-21 7 views
5

में नकारात्मक टेक्स्ट इंडेंट के साथ चौड़ाई समस्या जब मैं नीचे कोड चलाता हूं, तो मुझे स्क्रीन पर एक नीला बॉक्स दिखाई देता है।सीएसएस

<!DOCTYPE html> 
<html dir="ltr"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <style type="text/css"> 
       a {display:block;background:blue; text-indent:-9999px; float:left;} 
     </style> 
    </head> 

    <body> 
     <a>Hello World</a> 
    </body> 
</html> 

कैसे आ अगर मैं पाठ Hello WorldHelloWorld करने के लिए, नीले बॉक्स गायब हो जाता है बदलते हैं?

अतिरिक्त नोट्स - मैं इसे Google क्रोम में देख रहा हूं।

+0

पाठ इंडेंट: -9999px – Jawad

+0

दिलचस्प। मैंने यह भी देखा कि तत्व की गणना की चौड़ाई बिना अंतरिक्ष के 0 है और 40 के साथ है। – kinakuta

+0

हाँ, यह क्रोम विशिष्ट प्रतीत होता है। शायद सिर्फ एक क्रोम बग? – kinakuta

उत्तर

5

जैसा कि मैंने एक टिप्पणी में कहा था, white-space: nowrap इसे गायब कर देता है।

हालांकि, मुझे यकीन नहीं है कि वास्तव में यहां क्या चल रहा है। क्रोम/सफारी + ओपेरा सभी एक ही तरीके से व्यवहार करते हैं और "ब्लू बॉक्स" दिखाते हैं, जबकि फ़ायरफ़ॉक्स और आई 7-9 ब्लू बॉक्स नहीं दिखाते हैं।

आपका कोड: http://jsbin.com/igewuy

white-space: nowrap "ठीक" के साथ

: http://jsbin.com/igewuy/2