填充不影响Internet Explorer中的孩子

Question

是否有任何理由说明填充不会影响Internet Explorer中元素的子元素（在IE 11上测试）？

作为一个非常简单的例子：

＆＃13;

＆＃13;

main {
  padding: 32px;
}

＆＃13;

<main>
  <p>
    This is just a test...
  </p>
</main>

＆＃13;

＆＃13;

＆＃13;

我希望段落能够填充（在我试过的所有现代浏览器中就是这种情况），但由于某种原因，填充在Internet Explorer中没有效果......

任何人都可以解释这个问题以及如何解决这个问题吗？我会自发地想到像main > * { padding:inherit }这样的东西，但这显然不是最好的想法......

Answer 1

好的，出于某种原因，IE为<main>提供了display: inline;的CSS属性。要确保它与Chrome一样，只需将display: block;添加到<main>标记。