CSS填充问题 - 可能是边框？

Question

main {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 76%;
}

出于某种原因，上面的CSS适用于Chrome，Firefox，iOS，Safari但不适用于Internet Explorer，也不适用于Windows Phone，Blackberry等。我试图实现的效果是在页面边缘和div。我使用填充而不是边距，所以我可以使用box-sizing来消除div溢出的问题。

任何想法为什么？

示例：