當分辨率發生變化時，將邊框推入下一行邊框

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; 

} 

通過使用盒的上漿，可以包含整個元件（元件，邊際，填充，邊框）內的所有元件的設定寬度。當然，你必須瀏覽器測試和所有，但只要你瞄準ie8 +，你應該沒問題。

Fiddle Here

Answer 2

嘗試使用CSS盒大小，像這樣：

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