Question

我在使用box-sizing时出现问题：在旁边的元素上使用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

Answer 1

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

box-sizing的问题：<aside>元素上的border-box </aside>

1 个答案: