为什么Firefox和Chrome中的行高不同？

Question

我根据Matthew Pennell的解决方案（CSS Tricks的codepen）创建了多行填充文本。在Chrome中看起来都很好，但在Firefox的跨度元素高度大于其祖先的高度。如果我为Firefox调整垂直填充，在Chrome中会出现同样的问题，反之亦然。

为什么会这样？这个问题的真正技术原因是什么？

HTML代码：

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

CSS代码：

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

Answer 1

设置强大的line-height: 1;将解决问题也阅读我的评论。

Answer 2

要获得相同的标题效果，只需使用大纲。 H1不需要强大。

.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>

这是codepen：http://codepen.io/anon/pen/vgRvjM

如果你需要完全视觉（这意味着从顶部和底部减少紫色空间，你可以使用例如之前和之后的边框）：

.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

Answer 3

不幸的是，没有一个完整而干净的crossbrowser解决方法。因为不同的UA使文本不同，所以每个文本行的高度可能更高（或者副verca）。因此，我创建了一个基于SCSS计算所需盒子大小的解决方案，并通过溢出属性隐藏伪像。

如果遇到同样的问题，这是我的解决方案：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);
}

Answer 4

Chrome和Firefox似乎使用不同的文本布局系统。在Chrome中，它将覆盖line-height属性，Firefox似乎使用正确的属性。