CSS: Do empty inputs have different line heights for content inputs?

Question

This is not so much a specific problem for a particular site, but just that I seem to nortice in every project.

If you look here . Click inside the entrance, the carriage will stretch to the height of the entrance. Now press the key, the carriage is compressed to the height of the text. Someone:

a) Know why this is happening

b) Know how to fix it?

Answer 1

I don't know if it's worth it, but if you insist on fixing this problem in Firefox, you can do this:

In the focus event, if the value of the text field is an empty string, then:

• " " ( )

: http://jsfiddle.net/U2TPK/11/

script, . : http://vidasp.net/js/selection.js
selec.set(this, 0, 0) .

$("input:text").focus(function() {
    if ( this.value.length === 0 ) {
        this.value = " ";
        selec.set(this, 0, 0);
    }
});  

: http://jsfiddle.net/U2TPK/12/
( , )

Answer 2

, , , :

input {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 20px;
    width: 200px;
    font-size:20px;
}

:

input {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 15px;
    width: 200px;
    line-height:20px;
}

Answer 3

.

option
{
    height: 12px;
}