容器的大小＆＃34; CSS大纲＆＃34;不同的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显示更多（由于容器底部的边缘和＃39;段落＆＃34;保证金底部＆＃34;）。

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

Answer 1

只需将.no-margin课程添加到p内的第二个.container

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