2011-08-22 11 views
54

के साथ अलग है टेक्स्टरेरा टैग के तहत कुछ अतिरिक्त स्थान है। विभिन्न ब्राउज़रों में 1 से 4 पिक्सल तक। मार्कअप बहुत सरल है:टेक्स्टरेरा के तहत अतिरिक्त स्थान, ब्राउज़र

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
    <head> 
     <style> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      .main { 
       background-color: red; 
      } 
      textarea { 
       background-color: gray; 
       resize: none; 
       margin: 0; 
       border: 0 none; 
       padding: 10px; 
       height: 50px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="main"> 
      <textarea></textarea> 
     </div> 
    </body> 
</html> 

यहाँ है कि यह कैसे ब्राउज़रों में प्रदान की गई है:

Screenshot

हो रहा क्यों है? इस अतिरिक्त जगह को कैसे हटाएं?

उत्तर

133

vertical-align: toptextarea जोड़ें।

अंतराल के लिए कारण यह है कि textarea एक inline (या inline-block) तत्व है, और अंतर को अंतरिक्ष पाठ में descenders के लिए आरक्षित है। मुझे नहीं पता कि अलग-अलग ब्राउज़रों के बीच अंतर अलग क्यों है।

+1

मुझे इसे मारो, +1! – Kyle

+9

यह 100% काम करता है। तुम अकल्मन्द हो। – Roman

+3

कुल प्रतिभा !!! –

7

मेरे मामले में, थर्डॉट का उत्तर माता-पिता <div> की निचली सीमा के साथ अच्छा काम नहीं करता है।

display: block हालांकि मुझे अच्छी तरह से उपयुक्त है।