css - Firefox 上的 Css ::before 错误

对不起，如果解释是生涩的，而且到处都是。这件事需要它自己的适当文章。

我想我找到了问题或为什么会发生这种情况，这更多的是正在发生的事情，而不是问题的答案。

这要么是 Firefox 中的错误，要么是 Firefox 无法为您管理所有内容。

你的结构是这样的：

<Inline Level Element> (h1)
    <Block Level Element> (:before)
    <Inline Level Element> (the text which is an inline level element can be a block level element)
    <Block Level Element> (:after)
</Inline Level Element> (/h1)

你说什么我们试图复制它？

.inlineElement {
  display: inline;
  padding: 0px 20px;
  background-color: red;
}

.inlineElement>span {
  background-color: orange;
}

.BlockElement {
  display: block;
  background-color: brown;
  height: 10px;
  width: 100%;
}

<div class="inlineElement">
  <div class="BlockElement"></div>
  <span>Text</span>
  <div class="BlockElement"></div>
</div>

现在，如果你运行它，你会在边缘看到一些无法识别的空间，这恰好是应用在h1. （这是在 chrome 和 Firefox 中测试的，结果相同。）

现在，由于块级元素位于它们自己的行上，这应该是可以理解的，但是当它位于内联元素中时，它仍然会做同样的事情，因为它在填充之后它会以看起来合乎逻辑的方式推动它。

现在我们知道当你浮动一个元素时，向左或向右，然后其余内容跟随它（取决于 text-align 属性，但内容不会像绝对定位那样忽略浮动元素的尺寸），让我们试试它与一个正常的例子。

console.log(document.querySelector('.div').getBoundingClientRect().height);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.div {
  background-color: pink;
}

p {
  float: left;
  width: 100%;/* To be 100% width like your code */
  background-color: brown;
}

<div class="div">

  <p>I'm floated</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing 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 ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

直截了当，为什么要打印高度，请继续阅读下面的内容。

现在，如果包含块是一个内联级元素怎么办（比如在一个你不经常看到的跨度内有 ap，原因很明显）

console.log(document.querySelector('.div').getBoundingClientRect().height);
console.log(document.querySelector('.div>p').getBoundingClientRect().height);

console.log(document.querySelector('.div').getBoundingClientRect().height + document.querySelector('.div>p').getBoundingClientRect().height, '/ +1 which is the space inline elements keeps to care for decenders that block level element add to their height');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.div {
  display: inline;
  background-color: pink;
}

p {
  float: left;
  width: 100%;/* To be 100% width like your code */
  background-color: brown;
}

<div class="div">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing 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 ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

我想这不言自明，这里的高度更短，只有当我们添加时，其他示例中的高度才会变大width:100%，因为我们将文本向下推，因此高度增加，在这个示例中不会发生同样的情况width:100%没有效果，所以可以肯定地说，元素在外面然后父级跟随，可能是一个错误，可能是它的预期行为方式。

因此，现在我们知道浮动块级元素超出了它的父级，然后父级跟随，在 chrome 和 Firefox 中的结果相同。

如果我们在内容之前添加某种空间，例如填充或边框

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.div {
  display: inline;
  background-color: pink;
  padding: 0 10px;
  border-left: 10px solid lime;
  border-right: 10px solid lime;
}

p {
  float: left;
  width: 100%;
  background-color: brown;
}

<div class="div">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing 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 ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

因为浮动元素占用 100% 的宽度，所以我们知道父元素会跟随，在 chrome 中我们会看到我们所期望的，但是 Firefox 似乎不在乎可能忽略？，我们看到填充/边框被卡在浮动元素的末尾，然后内容将环绕到下一行。

一切正常的浏览器似乎做了额外的工作（正如我们所说的魔法），如果您将文本视为内联级元素，它实际上是将它浮动到左侧，就像它的兄弟姐妹一样并将填充移动到它。

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  display: unset;
}

h1>span {
  float: left;
  padding: 5px 12px;
  background-color: #00addc;
  margin-bottom: 2px;
}

h1::after {
  content: '';
  display: block;
  margin-bottom: 25px;
  height: 1px;
  float: left;
  width: 100%;
}

h1::before {
  content: '';
  display: block;
  height: 1px;
  float: left;
  width: 100%;
  background-color: #00addc;
  margin-bottom: 0px;
}

<h1><span>Text</span></h1>

尝试在 Firefox 中运行它并查看效果，chrome/safari 正在做些什么来在内部解决这个问题，我真的不知道我用谷歌搜索了这个但没有找到任何关于它的文章。

PS：您可能想考虑阅读这篇文章，它谈到了在内联级元素中具有块级元素。

css - Firefox 上的 Css ::before 错误

问题描述

解决方案

推荐阅读