html - 框大小问题:<aside>元素上的边框

我在使用box-sizing时遇到问题：aside元素上的border-box ..下面提供的屏幕截图。

以下是我网站上的代码段：

HTML：

<aside>
     <h2 class="widgettitle">No active widgets</h2>
     There are no active widgets in this area.
</aside>
<aside>
     <h2 class="widgettitle">No active widgets</h2>
     There are no active widgets in this area.
</aside>
<aside>
     <h2 class="widgettitle">No active widgets</h2>
     There are no active widgets in this area.
</aside>
<aside>
     <h2 class="widgettitle">No active widgets</h2>
     There are no active widgets in this area.
</aside>

CSS：

#footer .top aside {
    float: left;
    margin-bottom: 30px;
    padding-right: 30px;
    width: 25%;
    box-sizing: border-box;
}

如您在图像上看到的，填充仍在框的外部。 Firebug甚至没有在CSS检查器上显示box-sizing属性。

图片：http://s24.postimg.org/x2vl2z1b8/scr.jpg

最佳答案

不幸的是，Firefox是最后一个仍需要box-sizing前缀的浏览器。只需在-moz-box-sizing: border-box;行之前添加box-sizing，就可以解决问题。