display：在Firefox中，多行文本的内联元素不正确的高度

Question

blockquote设置为display: inline，文本换行到多行。在Safari和Chrome中，高度（或者说是＃34;空间＆＃34;浏览器看到它垂直占据）是所有行放在一起的总和（包括填充，行高，字体大小等）

然而在Firefox中，只有第一行似乎是＆＃34;使用＆＃34;确定绝对定位坐标（注意在下面的图片中，Firefox实际上是报告所有行＆＃39;组合高度/空间）。这导致绝对根据此内联元素高度定位的子元素的不一致。

引用图片是pseudo::before内联元素blockquote元素内的背景图片（position: relative）。这个独特的组合允许尾随引号“浮动”。确切地说，最后一个字在最后一行结束 - 至少在-webkit-浏览器中。 right和bottom坐标基于最后一个单词的行的当前末尾，而不是包含的块空间（顺便说一下，它非常酷）。

为什么Firefox与此不同，是否有适用于display的变通方法：inline（文本突出显示效果的要求）？

Safari /铬：

的火狐：

以下是通用代码：

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

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

Answer 2

我在父元素上使用display: contents;对其进行了修复。