css - 当分辨率改变时，边框将浮动推到下一行

Question

我正在制作一个导航，该导航需要每边都有边框的按钮，需要填充一定的空间。然而，我采用的基于浮动的方法在 Chrome 上更改分辨率时会中断。我相信这是因为实际分辨率变小了，因此浏览器必须圆角，并且在此过程中边框始终保持在1px...

你如何最好地解决这个问题

http://jsfiddle.net/ctZKr/

<div id="contain">
  <div class="in"></div>
  <div class="in"></div>
</div>

#contain{
    width:200px;
}
.in{
    float:left;
    width:98px;
    height:100px;
    border-right:1px solid black;
    border-left:1px solid black;
    background-color:yellow;

}

100%

90%：

Answer 1

#contain{
    width:200px;
}
.in{
    float:left;
    width:100px;
    height: 100px;
    box-sizing: border-box;
    border-right:1px solid black;
    border-left:1px solid black;
    background-color:yellow;

}

By using box-sizing, you can contain the entire element (element, margin, padding, border) all within the set width of the element. Of course, you'll have to browser test and all, but as long as you're targeting ie8+, you should be fine.

Fiddle Here

Answer 2

Try to use css box-sizing like so:

.in {
   box-sizing:border-box;
 }