Input Height Differences in Firefox and Chrome

input height differences in Firefox and Chrome

The problem is essentially line-height.

Chrome sees line-height much like it sees height and Firefox doesn't.

Adding height to the input should solve the problem, though you should be careful that your line-height and height match.

For example: height: 20px; line-height: 20px;.

http://jsfiddle.net/e2agj/1/ - Last example input is the correct one.

CSS Firefox and Chrome different height output

It works in both browsers with defined height.

.test_line_3 {  margin: 40px auto auto;  height: auto;  display: inline-block;  border: 8px solid rgba(10, 10, 10, 0.8);}#big_search_m {  padding: 12px;  border: 0px none;  margin: 0px;  font-size: 20px;  width: 400px;  float: left;  height: 52px;  box-sizing: border-box;  background: yellow;}#search_magnifier {  float: left;  background: url("https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1");  height: 52px;}

<div class="test_line_1"></div><div class="test_line_2"></div><div class="test_line_3">
  <form method="get">    <input type="hidden" name="page_id" />    <input type="text" name="term1" value="" id="big_search_m" />    <input type="image" id="search_magnifier" />  </form>
</div>

</div></div>

Text input and submit input elements have different height in firefox

All browsers have differences between default behaviours and styles, but firefox is more flexible with S.O. and form elements are controlled by default by the operating system.

The solution is remove padding or use height with EM meassures.

Remove padding:

https://jsfiddle.net/04camn42/2/

 .class { padding: 0 }

Using EM height:

https://jsfiddle.net/04camn42/3/

 .class {
     height: 1.5em
 }

IF you use EM you don't worry about responsiveness and user choices.

Input has different Widths in FireFox and Chrome

The size attribute of inputs specifies the width in (number of) characters. The font is bigger in firefox.

Give your inputs a width using css.

Different heights of input boxes in IE, firefox and chrome

Add height:21px;to the .btn class. Look at the fiddle, it works fine now. http://jsfiddle.net/kk3ffmwp/2/

CSS text field difference between chrome and firefox

It's a line-height problem.

Try:

.form-signin input[type="text"],
.form-signin input[type="password"] {
    font-size: 20px;
    text-align: center;
    height: auto;
    margin-bottom: 20px;
    padding: 20px 9px 20px;
    line-height: 24px;
}

24px or more or less

Why line-height in Firefox and Chrome is different?

Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.

Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL

HTML:

<p class="multiline-text">
    <span class="multiline-text__wrapper multiline-text__wrapper--outer">
        <span class="multiline-text__wrapper multiline-text__wrapper--left">
            <span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
        </span>
    </span>
</p>

SCSS:

/* 
Variables 
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;

$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);

$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;

/* 
= Snippet Styles 
This code is required
*/
.multiline-text {
    color: $multiline-font-color;

    padding: 0px $multiline-padding-horizontal;

    // hide line-height artefacts
    overflow: hidden;
    position: relative;
}
.multiline-text__wrapper {
    background-color: $multiline-bg-color;
    padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer { 
    // Inner padding between text lines
    line-height: $base-line-height;
}
.multiline-text__wrapper--left { 
    position: relative;
    left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
    position: relative;
    right: -($multiline-padding-horizontal / 2);
}

CSS input height in Chrome

My guess is that Chrome add 1px up and 1px down to make the text readable.

Of course you can force chrome to show a 16px height input by adding

height: 16px;

But as always, do not count on line-height to size un underlying element.

Input Height Differences in Firefox and Chrome