css - 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/