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/