为什么 Firefox 和 Chrome 中的 line-height 不同？

Question

我根据 Matthew Pennell 的解决方案（codepen by CSS Tricks）创建了多行填充文本。在 Chrome 中一切看起来都很好，但在 Firefox 中，跨度元素的高度大于其祖先的高度。如果我为 Firefox 调整 vertical padding，在 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

Chrome 和 Firefox 似乎使用不同的文本布局系统。 在 Chrome 中，它会设置 line-height 属性，而 Firefox 似乎使用了正确的属性。

Answer 2

不幸的是，没有一个完整而干净的跨浏览器解决方法。因为不同的 UA 渲染文本不同，所以每个文本行的高度可能会高一点（反之亦然）。因此，我创建了一个基于 SCSS 计算所需盒子大小的解决方案，并通过 overflow 属性隐藏伪影。

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

要达到相同的标题效果，只需使用轮廓即可。 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>

这里是代码笔：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：http://codepen.io/anon/pen/QdmzxK

Answer 4

在 strong 上设置 line-height: 1; 将解决问题，也请阅读我的评论。