Dodatkowa przestrzeń pod polem tekstowym, różni się w zależności od przeglądarek.

Jest trochę miejsca pod tagiem textarea. Od 1 do 4 pikseli w różnych przeglądarkach. Znacznik jest bardzo prosta:Dodatkowa przestrzeń pod polem tekstowym, różni się w zależności od przeglądarek.

<!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>

Oto jak to jest renderowane w przeglądarkach:

Screenshot

Dlaczego tak się dzieje? Jak usunąć tę dodatkową przestrzeń?

Źródło

2011-08-22 Roman

133

Dodaj vertical-align: top do textarea.

Powodem jest to, że szczeliny textarea jest inline (lub inline-block) elementu oraz szczeliny stanowi obszar zarezerwowany do descenders w tekście. Nie wiem dokładnie, dlaczego różnica jest różna między różnymi przeglądarkami.

Źródło

2011-08-22 08:43:48 thirtydot

Pokonaj mnie, +1! – Kyle

Działa to w 100%. Jesteś geniuszem. – Roman

Ogółem geniusz !!! –

W moim przypadku odpowiedź thirtydot nie działa dobrze z dolną granicą rodzica .

display: block dobrze mi pasował.

Źródło

2015-11-06 03:20:22

Dodatkowa przestrzeń pod polem tekstowym, różni się w zależności od przeglądarek.

Odpowiedz

Powiązane problemy