Clever Geek Handbook

Input line height makes input scrollable in IE

I noticed this strange behavior in IE when I set a value line-height

in the field input

. You can take a look here , try writing some text in the box input

, then press and hold the mouse button and move the mouse up and down: input

scrolls with a space line-height

. Is there a workaround for this?

    input {
      padding-top: 5px;
      padding-bottom: 5px;
      line-height: 2;
    }
      

        
        
        
      

    
<input type="text">
Run codeHide result


+3


source to share


2 answers


The scrolling appears because the padding + font size values ​​are lower than those used for line-height

;

Line-height: 2; has a higher value, so it displays inside the input text and gives a scrolling effect on focus.

You can try to compute it according to your input-text font size and set the line-height value in pixels to have an absolute line-height , not a relative one.



For example if yours font-size

is 14px try setting the line height

14px + 5px padding top + 5px padding-bottom equal to 24px.

See if the 24px solution solves your problem.

0


source


I would add an extra height value for the vertical height of the input box: height: 2em;



0


source






More articles:


All Articles