Firefox Line-Height Issue with Input Fields

Firefox bug with INPUT line-height? Any work around?

http://jsfiddle.net/qzYVP/1/

This relies on explicit sizing using height + padding + line-height equal to font-size. Works in IE8/9, FF, Chrome.

.rb {
    width: 142px;

    /* tweak these to get the exact font size/position desired */
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    padding: 90px 0 38px 0;

    float:left;
    background:#2F2F2F;
    color:#FFF;
    margin-top:15px;
    border:0;
    outline:none;
}

Example with relative font size: http://jsfiddle.net/qzYVP/2/

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.

how fix bug with firefox different line-height with css input type button and a button bootstrap

Well, you can replace the input by a button and the line height will work.

So, don't use

<input type="button" value="Relate and publish" />

but use

<button type="button">Relate and publish</button>

instead. See http://jsfiddle.net/XHw4L/4/

Or, if you can't change the HTML at all, you can change the height to the input explicitly to match the height of the button. In this example, 28px would do the trick, but you may have to fiddle a bit if there are other styles defined elsewhere.

See updated fiddle.

CSS line-height not the same in Firefox and Chrome

You could explicitly set the line-height.

line-height: 1.2;

Working Example (JSFiddle):

.txt {

    width:300px;

    height:48px;

    overflow:hidden;

    border-bottom-style:solid;

    border-bottom-width:1px;

    border-bottom-color:#aaaaaa;

    margin-bottom:2em;

    font-size:0.8em;

    line-height: 1.2;

}

<div class="txt">

    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 

</div>

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);
}

Inconsistent line height between Chrome and Firefox

It turns out that, for some reason, <br> elements in Firefox don't want to properly respect the line-height of their parent.

I fixed the issue by setting the line-height of all <br> elements to 0%.

How do I correct the line-height inconsistency on input elements between webkit browsers and Firefox?

on sponsor.css you have div#sponsor-notify-me input#email-field there this padding:10px 10px 0; just change this to padding:0 10px 0; and also change the height:32px; to height:42px;