显示：在 Firefox 中具有多行文本的内联元素高度不正确答案

【问题标题】：display: inline element with multiple lines of text not correct height in Firefox显示：在 Firefox 中具有多行文本的内联元素高度不正确
【发布时间】：2015-04-06 19:41:42
【问题描述】：

有一个blockquote 设置为display: inline，并且文本换成了多行。在 Safari 和 Chrome 中，高度（或者更确切地说是浏览器看到它垂直占用的“空间”）是所有行放在一起的总和（包括填充、行高、字体大小等）。

但是在 Firefox 中，似乎只有第一行“用于”确定绝对定位坐标（请注意，下图中的 Firefox 实际上报告了所有行的组合高度/空间）。这会导致根据该内联元素的高度绝对定位的子元素不一致。

引用图像是blockquote 内联元素（即position: relative）上pseudo::before 元素内的背景图像。这种独特的组合允许尾随引号精确地“浮动”在最后一行的最后一个单词结束的位置——至少在-webkit-浏览器中是这样。 right 和 bottom 坐标基于最后一个单词的当前行尾，而不是包含块空间（顺便说一句，这很酷）。

为什么 Firefox 在这方面有所不同，是否有适用于 display: inline 的解决方法（文本高亮效果的要求）？

Safari/Chrome：

火狐：

这是通用代码：

blockquote {
    font-size: 1.333em;
    line-height: 2.167em;
    color: #4DC3FF;
    box-shadow: -0.5em 0px 0px rgba(0, 0, 0, 0.5), 0.5em 0px 0px rgba(0, 0, 0, 0.5);
    box-decoration-break: clone;
    border-top: 0.2em solid transparent;
    border-bottom: 0.222em solid transparent;
    display: inline;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

blockquote:before {
    content: "";
    display: block;
    position: absolute;
    left: -4.708em;
    right: -4.708em;
    top: -1.867em;
    bottom: -1.903em;
    background-image: url("quotes-left.svg"), url("quotes-right.svg");
    background-repeat: no-repeat;
    background-size: 3.708em 3.333em, 3.708em 3.333em;
    background-position: 0px 0px, 100% 100%;
}

你可以在这里看到它的实际效果：

http://www.demo.com/ehome/index.php?eventid=29414&#what-they-say

【问题讨论】：

我对box-decoration-break不是很熟悉，但我相信这意味着每个片段（行）都是分开处理的。 Firefox 可能会将 :before 和 :after 添加到第一个片段中。
@bobdye 无论有没有 Mozilla 的 box-decoration-break，都会发生相同的描述行为

标签： css firefox absolute

【解决方案1】：

面临同样的问题。

Firefox 与绝对定位元素的第一行有关。

通过将伪元素的位置从绝对位置更改为相对位置来解决此问题。这是一个例子：

.quote {
   text-align: center;
   width: 400px;
   margin: 0 auto;
   white-space: nowrap;
 }

 .quote q {
   position: relative;
   display: inline;
   quotes: none;
 }
 
 .quote q span {
   white-space: normal;
 }

 .quote::after,
 .quote::before {
   position: relative;
   display: inline-block;
   content: '"';
   width: 15px;
   height: 15px;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: red;
 }

<div class="quote">
  <q><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</span></q>
</div>

【讨论】：

【解决方案2】：

我在父元素上使用display: contents; 修复了它。

【讨论】：