在Chrome和＆amp ;;之间呈现否定文本缩进布局的差异火狐

Question

我使用填充和负文本缩进为响应式表单创建缩进布局，但现在想要使底部段落成为块级元素，因此它总是包装。

当底行显示为内嵌或内嵌块时，布局正常，但只要底行是显示块，Chrome中的整个布局就会发生变化。

我不知道哪个浏览器是正确的，但这是Firefox对我所处理的布局的解释。

这是我用于表单尝试解决此问题的布局的简化版本。

http://codepen.io/rachelreveley/pen/rxxxRj

<div>
  <div>
    <p class="top">Lorem ipsum dolor sit amet</p>
    <p class="bottom">Lorem ipsum dolor sit amet</p>
  </div>
</div>

<style type="text/css">
    div div {padding-left: 36%; margin: 0; text-indent: -18%; background-color: #cee; width: 300px;}
    p {text-indent: 0;}
    p.top {display: inline-block; background-color: #ffc;}
    p.bottom {display: block; width: 200px; background-color: #fcf;}
</style>

如何使用此代码的真实示例。

Answer 1

我已经通过在父容器上使用填充更改为边距然后在此之后调整大小来解决此问题。