CODEWITHSUNDEEP
cssfirefoxgoogle-chromeheight
FeKuLa
FeKuLa

Reputation: 392

2px of different between Chrome and Firefox

I have 2px difference between Chrome and Firefox in the height of input, why? (I don't want to specify height to input element)

<html>
<head>
<title></title>
<style type="text/css">
p {
font-size: 11px;
font-family : Verdana;
}
input {
border: 1px solid #ccc;
font-size: 11px;
font-family : Verdana;
}
</style>
</head>
<body>    
<p>
<label>Text</label>
<input type="text" />
</p>
</body>
</html>

By the way, If I put Arial font instead of Verdana, the sizes are correct. Why?

Thank you.

Example

Upvotes: 0

Views: 1253

Answers (3)

Elin Y.
Elin Y.

Reputation: 1173

Set line-height to 1em:

input {line-height: 1em;}

Upvotes: 0

Sameh
Sameh

Reputation: 346

I was having a similar issue with Firefox not rendering a Search box same as Chrome. I used the following css line and it fixed it:

input::-moz-focus-inner {
    border: 0;
    padding: 0; 
    }

Let me know if it worked.

Upvotes: 3

MikeM
MikeM

Reputation: 27405

Adjust line-height

input { line-height:17px; }

Upvotes: 1

Related Questions