html - box-sizing : border-box on a element 问题

Question

我在使用 box-sizing: border-box on aside 元素时遇到问题。下面提供了屏幕截图。

以下是我网站的代码片段:

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

Answer 1

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