css - 容器 "CSS outline"的大小在 chrome/ie 和 FF 中不同

Question

抱歉标题不好，但我不确定这里发生了什么，所以我保持标题开放。

我有一个非常简单的标记，其中一个 div 位于其容器的右下角:

<div class="container mod">
  <p>Content</p>
  <p>More content</p>
  <div class="inner mod">
    <p class="no-margin">Bottom right content</p>
  </div>
</div>
<p>Next element outside of container</p>

随附的 CSS:

p {
  margin-bottom: 2em;
}

.container {
  width: 500px;
  background-color: #eee;
  position: relative;
}

.no-margin {
  margin: 0;
}

.mod {
  outline: 1px solid #f00;
}

.inner {
  position: absolute; 
  bottom: 0;
  right: 0;
}

( see codepen )

在 Chrome 中，它显示正确(根据我想要的样子)，底部定位的 div 显示在底部，而在 FF 中，div 显示得更靠上(由于容器的 margin-bottom '段落“边距底部”)。

是什么导致了这种不同的行为？我该怎么做才能使它在浏览器中以相同的方式显示？将轮廓更改为边框是不可能的。

Answer 1

只需将 .no-margin 类添加到 .container 中的第二个 p

<div class="container mod">
  <p>Content</p>
  <p class="no-margin">More content</p>
  <div class="inner mod">
    <p class="no-margin">Bottom right content</p>
  </div>
</div>
<p>Next element outside of container</p>