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

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;

}

通过使用box-sizing，您可以在元素的设置宽度内包含整个元素（元素，边距，填充，边框）。当然，你需要浏览器测试和所有，但只要你的目标ie8 +，你应该没事。

Fiddle Here

Answer 2

尝试使用css box-sizing，如下所示：

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