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%;）。

页脚区域右侧超出

1 个答案: