Css :: Firefox之前的bug

Question

这是我的h1的css代码：

h1 {
  padding: 5px 12px;
  background-color: #00addc;
  display: unset;
  margin-top: 0 !important;
  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: 2px;
}

<h1>Advocacy documents</h1>

在Safari上运行良好，但在firefox上有bug ... 有什么想法??

在Safari上： Safari

在Firefox上： Firefox

Answer 1

很抱歉，如果解释，生涩，到处都是。这件事需要它自己的正确文章。

我认为我发现了这个问题或者为什么会发生这种情况，这更多的是发生了什么，而不是问题的答案。

这可能是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)

你说我们试图复制它？

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

直接向前，为什么要打印高度，请继续阅读下面的内容。

现在如果包含块是一个内联级别元素（比如在一个跨度中有一个p，你可能经常看到它，显而易见的原因）该怎么办

＆＃13;

＆＃13;

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');

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想这就说明了自己，这里的高度更短，只有当我们添加width:100%时，高度在另一个例子中变大，因为我们向下推文本因此高度增加，同样没有＆＃ 39;在这个例子中发生width:100%没有任何效果，所以可以肯定地说，元素到达外部然后父进程跟随，可能是一个错误可能是它的行为方式。

所以现在我们知道一个浮动的块级元素超出它的父级，然后父级跟随，在chrome和Firefox中也是如此。

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

由于浮动元素的宽度为100％，因此我们知道，在chrome中，我们会看到我们期望的内容，但Firefox似乎并不关心可能会忽略？，我们看到填充/边框被卡住了浮动元素，然后内容环绕到下一行。

浏览器里的所有东西都能解决，似乎做了额外的工作（就像我们说的那样神奇），如果你将文本视为内联级别元素，它实际上是将它漂浮在左边，就像它一样＃39 ;兄弟姐妹，并将填充物移到它上面。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

PS：你可能想考虑阅读this，它说的是在内联级别元素中有块级元素。

Answer 2

我认为这是一个错误。很棒的发现。解决方法非常简单：

h1 {
  padding: 5px 12px;
  background-color: #00addc;
  display: inline-block;
  margin-top: 0!important;
  margin-bottom: 2px;
}
h1::before {
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #00addc;
  margin-top: -5px;
}

<h1>Advocacy documents</h1>