击败边框：响应式布局的克星

精选翻译

duanmengna 2013-02-26 15:37:30

响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。

假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就是所有列实际占的总宽比。所以每一列的占宽比即16%（80% /5）。下面是一个详细的图表：

相应的CSS代码如下：

.column{ 
   width:16%; 
   margin: 2% 2%; /*2% right +2% left = 4% margin*/
   float: left;
   background: #03a8d2;  
}

对应的界面是：

当我们给每一列添加一个2px的边框时，问题出现了，如下图，最后一列被挤到下面去了。

解决方案当然应该是：在之前的计算中我们应该考虑到边框（border），但是我们怎么去做呢？结论是，我们不能用百分比去设置border边框的大小，只能用一个固定的值。因为如果所有的都使用百分比设置，那么我们留给border的空间也会是一个变化的值，也就是说当页面宽度变化时，border的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！

解决方案一： CSS Outline

如果我们将border 换成另一个CSS属性outline，那么问题就迎刃而解了。

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓线不会占据空间。

.column{ 
    width: 16%; 
    float: left; 
    margin: 2% 2%； 
    background: #03a8d2; 
    outline: 2px solid black; 
}

令人头疼的事：

1.浏览器兼容性

经过测试，一下浏览器都可以得到比较好的支持：Safari, Chrome, Opera, IE，但是值得注意的是IE 需要8以上的版本。

2.火狐下阴影的问题（box-shadow）

虽然火狐可以很好的支持outline属性，但是当你在outline上使用阴影的时候就会出现问题。具体如下图：

正常的safari显示：

同样的代码，在火狐中的显示：

正如你看到的，火狐将outline放置在了阴影之外，而不是正确的列边上，这是相当难看的！

3.其他的

要记住的最后一点是，我们不能像使用border那样，只定义其中的某一边（例如border-left），因为outline是整体的。

解决方案二：

设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢？

.column{ 
    width: 16%; 
    margin: 2% 2%; 
    float: left; 
    background:#03a8d2; 
    border: 2px solid black; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}