CSS響應百分比錯誤

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

來源

2013-08-16 martin_crd

使用網格中的浮點數 – Hushme

它是浮動的，不解決這個問題，在Safari瀏覽器是好的。 –

沒有看到你的代碼，這是一個猜測，但你可以嘗試添加* {box-sizing：border-box}到你的CSS嗎？ –

你可以做的就是把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/

來源

2013-08-16 21:17:51

只是可以肯定的，你能準確地告訴我哪一個我應該放101％？我的結構是這樣的：div.category-list> article（width：25％）> div.inner> img（需要填寫100％的文章....非常感謝 –

你需要添加一個新的包裝'article'標記，然後將該標記與CSS對齊並添加新的'width：101％' –

不幸的是，這並不能解決我的問題，有時圖像仍然會出現白色的「邊界」缺口。不是當你有100％的圖像填充div沒有填充或相互間的圖像之間的餘量。 –

CSS響應百分比錯誤

回答

相關問題