Heights Rendering Differently in Chrome and Firefox

Heights rendering differently in Chrome and Firefox

So first you have the W3C standards, which are a set of guidelines for browser makers.

And then you have the browser makers, who are free to do whatever they want (as evidenced by a history of deviations by Internet Explorer).

In particular, with CSS percentage heights, there are clear differences in behavior among browsers.

You've posted one example. Here's another:

Percentage Heights in Flexbox: Chrome/Safari vs Firefox/IE

When working with flexbox, Chrome and Safari resolve percentage heights on flex items based on the value of the parent's height property. Firefox and IE11/Edge prioritize the parent's flex height.

It appears Webkit browsers adhere to a more traditional interpretation of the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

In other words, for percentage height to work on an in-flow child, the parent must have a set height.

That is the traditional interpretation of the spec: The term "height" means the value of the height property. My own view is that this language is vague and open to interpretation, but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage values.

Recently, however, Firefox and IE have broadened their interpretation to accept flex heights, as well.

Examples of Firefox and IE using a parent's flex height as reference for a child's percentage height:

• Chrome ignoring flex-basis in column layout
• Chrome / Safari not filling 100% height of flex parent
• Height is not correct in flexbox items in Chrome
• Flexbox in Chrome--How to limit size of nested elements?

Knowing which browsers are in compliance with the spec is a bit difficult because, as I mentioned before, the spec language seems vague and open to interpretation.

With the last update to this part of the definition being in 1998 (CSS2), and the advent of new forms of height such as flex height, an update seems long overdue.

I think it's fair to say that when it comes to percentage heights, until the spec definition gets an update, you can expect rendering differences among browsers.

Alternative Solutions

Here are two alternatives to consider when wanting a child element to take the parent's full height.

1. Apply display: flex to the parent. This automatically sets align-items: stretch, which tells the child to expand the full available height of the parent.

2. Apply position: relative on the parent and position: absolute; height: 100%; width: 100% on the child. With absolute positioning, a percentage height will work without a specified height on the parent.

Firefox and Chrome rendering div height differently

Add line-height: 30px; to .menuitem in CSS.

Edit
I've tried with this CSS:

.menuitem a {
        width:auto;
        font-size:30px;
        line-height:100%;
        z-index:9999; 
        float:left;
        padding: 5px 10px 5px 10px;
        color: #fff;
        background-color: #000;   
}

and it should work - but I've got almost 100% same result only when Google font is commented out and Arial is used. So it's obviously a difference in the font-rendering itself. I'm also always going crazy becuase of such differences ;)

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

span height different in Firefox vs Chrome

Use this :

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block;
}

The difference is due to different render of fonts in browsers.

Rems rendering differently between Chrome and Firefox

That happens most certainly because your browsers have different font-size settings, you can easily check it with this fork of your codepen.

alert(document.querySelector('.rem-test').scrollHeight);

If the alerted values are different in chrome and firefox you should definitely check your font-size settings.

Firefox and chrome css differences : element height is different

Most of the browser rendering differences - especially height - can be handled if you use a reset or preferably a normalize CSS file.

Include this CSS file in your HTML and see how this goes.

http://necolas.github.io/normalize.css/

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>