html - 页脚区域右侧超出

Question

我有两列布局，唯一的是页脚区域。在我在它周围添加一个边框之后。右侧超出预期区域。 http://jsfiddle.net/zhshqzyc/tRqpd/4/

我在 Firefox 中测试它。一些CSS：

footer
{
   border-style: solid;
   border-width: 6px;
   margin: 0px;
   clear: both;
   background-color: rgb(178, 178, 178);
   background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
   font-size: .8em;
   text-align: center;
   height: 50px;
   bottom: 0;
   width: 100%;
   padding-top: 20px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   color: #336699;
 }

Answer 1

使用默认框大小，除了声明的宽度外，还会计算边框宽度。所以页脚声明的宽度是它包含元素的 100%，但是 6px 的边框被添加到任一侧。

要么添加box-sizing: border-box以使边框成为 100% 宽度计算的一部分，要么将边框大小声明为百分比并将其从width（例如width: 98%; border-width: 1%;）中减去。