Firefox 3 Line-Height

FireFox 3 line-height

The computed value of line-height: normal varies between platforms, browsers (and different versions of the same browser, as you state), fonts, and even different sizes of the same font (see Eric Meyer's article).

Setting a unitless value such as...

body {line-height: 1.2;}

...should work to normalize the spacing between browsers. If this is not working, can you provide a more-detailed description of your stylesheet?

It's hard (impossible?) to get "pixel-perfect" results, but in order to get results that are as predictable as possible, I try to use a line height that produces a nice round value when multiplied by the font-size. We can't know the user agent's default font size, but 16 pixels is somewhat common.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

If the user agent's starting font size is indeed 16 pixels then the line height of 1.5 comes out to a nice, even 24 pixels. Users can and do change the default font size or the page zoom, though, and different browsers have different methods of scaling the page. Nevertheless, I think I've had reasonable success for a majority of the users. If I can't make the line height come out exactly, then I shoot for a little above the integer rather than a little below, because some browsers seem to truncate values rather than round them.

Also, note that if you use a percentage for the line height, it behaves differently when the value is inherited.

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

Starting from a base font size of 16 pixels, the line height will be 24 pixels. Within a <p> element the font size becomes 12 pixels, but the line height does not become 18 pixels, rather it remains 24 pixels. This is the difference between line-height: 1.5 and line-height: 150%. When body {line-height: 1.5;} is used, the line height for <p> is 18 pixels.

sIFR - line height issue in Firefox 3 only?

Check whether the extra size is inside the Flash movie, or around it. In the latter case, you'll have to resort to CSS tweaking.

In the former case, check out the tuneHeight / tuneWidth and offsetTop / offsetLeft arguments for sIFR.replace(). These let you change position of the text inside the Flash movie and let you change how much margin the Flash movie leaves around the text.

This is sometimes necessary because the dimensions of the text are reported incorrectly by Flash.

Difference in computed height in Firefox and Chrome

Run the below snippet in Chrome & Firefox - you will get the height of a single line of text (minus the 2px contribution from the border) as:

Chrome : 59
Firefox : 59.5

var height = document.querySelectorAll('body > div')[0].clientHeight;console.log(height);

* {  padding: 0;  margin: 0;}div {  font-family: "Roboto";  font-size: 35px;  width: 500px;  line-height: 1.7;  border: 1px solid;}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div>  Lines of text</div>

Firefox shows gap between main and dropdown menu with increased line height

Use position to get the same

Update css part

    ul#main-menu li {
        display: inline-block;
        line-height: 200%;
        list-style: none;
        vertical-align: middle;
        width: 120px;
        position:relative; /*add this*/
    }

    ul#header-submenu {
        display: none;
        padding: 0;
        text-align: left;
        z-index: 1;
        position:absolute; /*add this*/
        top:auto; /*add this you can change as your need */
        left:0px; /*add this you can change as your need */
}

/* body ---------------------------------------------------------- */
body {  font-family: Calibri, sans-serif;  min-height: 100vh;  display: flex;  flex-direction: column;  margin: 0;  /* put the top margin into the header, otherwise there will always be a vertical scrollbar */}

/* header ---------------------------------------------------------- */
header {  width: 100%;}
.header-div {  width: 920px;  margin-left: auto;  margin-right: auto;}

/* main-menu ---------------------------------------------------------- */
div.float-left-menu {  float: left;  clear: both;}
ul#main-menu {  display: inline;  padding: 0;  position: relative;  font-size: 1.1em;  text-align: center;}
ul#main-menu li {  display: inline-block;  line-height: 200%;  list-style: none;  vertical-align: middle;  width: 120px;  position: relative;}
ul#main-menu li:hover {  background-color: #4f569d;}
ul#main-menu li a {  background: none;  color: #4f569d;  text-decoration: none;  text-transform: uppercase;}
ul#main-menu li span {  background: none;  color: #4f569d;  text-transform: uppercase;}
ul#main-menu li:hover>a {  color: #fff;  text-decoration: none;}
ul#main-menu li:hover>span {  color: #fff;}
ul#main-menu li:hover>ul {  display: block;  position: absolute;  /*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/}

/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {  display: none;  padding: 0;  text-align: left;  z-index: 1;  position: absolute;  top: auto;  left: 0px;}
ul#header-submenu li {  display: block;  line-height: 200%;  padding-left: 5%;  background-color: #eee;  list-style: none;  vertical-align: middle;  width: 240px;}
ul#header-submenu li:hover {  background-color: #4f569d;}
ul #header-submenu li a {  background: none;  color: #4f569d;  text-decoration: none;}
ul#header-submenu li:hover>a {  color: #fff;  text-decoration: none;}

<!DOCTYPE html>
<body>  <header>    <div class="header-div">      <div class="float-left-menu">        <nav>          <ul id="main-menu">            <li><a href="~/">Item 1</a></li>            <li>              <span>Sub 1</span>              <ul id="header-submenu">                <li><a href="#">SItem 1</a></li>                <li><a href="#">SItem 2</a></li>              </ul>            </li>            <li>              <span>Sub 2</span>              <ul id="header-submenu">                <li><a href="#">SItem 1</a></li>                <li><a href="#">SItem 2</a></li>              </ul>            </li>            <li><a href="#">Item 2</a></li>          </ul>        </nav>      </div>    </div>  </header></body>
</html>

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

line-height 2px lower in firefox vs webkit

I've done heavy testing of this in the past. I call it text jiggle. It's not something you can control. All you can do to minimize it is apply an explicit line-height (especially one in px) to every text element.

The default line-height varies by a wide margin in different browsers, and for different font families at different font sizes. Setting an explicit line-height addresses that.

But within that, the exact placement of the text within the line-height space will vary slightly browser-to-browser no matter what you do. For some combinations of font-size and line-height, all browsers match up. For instance, Arial at font-size:11px and line-height:14px renders the same in FF, Webkit, and IE. But change the line-height to 13px or 15px, and it varies by 1px browser-to-browser.

There's no standard or defined behavior for it. It's the result of how that particular font-family, font-size, and line-height happens to be rendered by the browser on that operating system. Arial, for instance, is a relatively consistent font, generally not varying by more than 1px as long as an explicit line-height is defined, while Helvetica varies by as many as 4 to 6 pixels.

Firefox 3 Line-Height