填充不影響Internet Explorer中的孩子

Question

有什么原因為什么填充不影響Internet Explorer中的元素的子元素（在IE 11上進行了測試）？

作為一個非常簡單的示例：

 main { padding: 32px; } 

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

我希望該段落會被填充（在我嘗試過的所有現代瀏覽器中都是這種情況），但是由於某種原因，填充在Internet Explorer中沒有任何作用...

誰能解釋這個問題以及如何解決？ 我會自發地想到諸如main > * { padding:inherit }類的東西，但這顯然不是最好的主意...

Answer 1

好的，出於某種原因，IE給<main>一個CSS屬性display: inline; 。 要確保它與chrome相同，只需添加display: block; 給你<main>標簽。