CSS響應百分比錯誤

Question

有沒有解決方案如何避免Chrome和Firefox中的1px「邊界」問題？我有一個4列的網格，每列是25％，裏面是適合父div的100％寬度的圖像。當您更改視口並調整瀏覽器大小時，您會看到特定大小的1px白色間隙。可能是因爲瀏覽器錯誤的計算百分比。有人解決了這個問題嗎？

Answer 1

你可以做的就是把div內的元素周圍的包裝和寬度設置爲101％，然後在父div（原包裝），你可以將其設置爲overflow: hidden像這樣：

HTML

<div class="big-poppa"> <!-- Original Wrapper --> 
    <div class="little-momma"> <!-- New Wrapper --> 
     <div class="this-little-piggie market"></div> 
     <div class="this-little-piggie home"></div> 
     <div class="this-little-piggie roast-beef"></div> 
     <div class="this-little-piggie none"></div> 
    </div> 
</div> 

CSS

.big-poppa { width: 100%; border: 1px solid black; overflow: hidden; } 
.little-momma { width: 101%; } 
.this-little-piggie { width: 25%; float: left; height: 40px; } 

.market { background: #eee; } 
.home { background: #999; } 
.roast-beef { background: #666; } 
.none { background: #333; } 

這裏是小提琴：http://jsfiddle.net/YLJmE/