CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Raymond
Raymond

Reputation: 137

Why line-height in Firefox and Chrome is different?

I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.

firefox-chrome-bug

Why it happens? What the real technical reasons of this problem?

HTML Code:

<div class="padded-multiline">
  <h1>
    <strong>How do I add padding to subsequent lines of an inline text element?</strong>
  </h1>
</div>

CSS Code:

:root {
    font-family: Arial, sans-serif;
    font-size: 20px;
}
.padded-multiline { 
  line-height: 1.3; 
  padding: 2px 0; 
  border-left: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 { 
  background-color: #c0c;
  padding: 4px 0;
  color: #fff; 
  display: inline;
  margin: 0; 
}
.padded-multiline h1 strong { 
  position: relative;
  left: -10px; 
}

Upvotes: 0

Views: 7874

Answers (4)

陳邦菁
陳邦菁

Reputation: 11

Chrome and Firefox seems to use different text layout system. In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.

Upvotes: 1

Raymond
Raymond

Reputation: 137

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

Upvotes: 1

maťo
maťo

Reputation: 1312

To achieve the same effect for title, just use only the outline. H1 does not need strong.

.padded-multiline { 
  line-height: 1.3; 
  padding: 2px 0;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 { 
  background-color: #c0c;
  padding:1px;
  color: #fff; 
  display: inline;
  outline: 10px solid #c0c;
  margin: 0;
  font-size:16px;
}
<div class="padded-multiline">
  <h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>

Here is codepen: http://codepen.io/anon/pen/vgRvjM

If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):

.padded-multiline:before{
  content:'';
  display:block;
  border:5px solid #fff;
  position:relative;
  left:-10px;
  top:-3px;
}
.padded-multiline:after{
  content:'';
  display:block;
  border:5px solid #fff;
  position:relative;
  left:-10px;
  bottom:-3px;
}

Codepen for this solution: http://codepen.io/anon/pen/QdmzxK

Upvotes: 0

Dinca Adrian
Dinca Adrian

Reputation: 1230

Setting a line-height: 1; on strong will fix the problem also read my comment.

Upvotes: 3

Related Questions