ChromeのCSSバグ：アイテム間のスペースを取り除く方法

Question

私は開発中のプラグインで問題を発見しました。パーセンテージが正確に加算されると、ボックス間にスペースがあります。この問題は特定の幅でのみ発生します。.wrapperdivの幅を調整すると実際に項目が正しく表示されます。

1. どうしてですか？そして、なぜそれは特定のサイズでしか見えないのですか？
2. どうすれば修正できますか？私は単純にいじるする.wrapper

.wrapper { 
 
    width: 454px; 
 
    height: 200px; 
 
    position: relative; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.inner { 
 
    width: auto; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.item-holder { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#item1 { 
 
    position: absolute; 
 
    width: 49.8%; 
 
    height: 49.8%; 
 
    top: 16.6%; 
 
    left: 41.5%; 
 
    background: red; 
 
} 
 

 
#item2 { 
 
    position: absolute; 
 
    width: 8.7%; 
 
    height: 33.2%; 
 
    top: 33.2%; 
 
    left: 91.3%; 
 
    background: green; 
 
}

<div class="wrapper"> 
 
    <div class="inner"> 
 
    <div id="item1"> 
 
    </div> 
 
    <div id="item2"> 
 
    </div> 
 
    </div> 
 
</div>

リンクの幅を調整することはできません。https://jsfiddle.net/4pve7ws4/

Answer 1

幅およびその他の数字は時々この、ピクセルの整数に丸めた取得します予期しない結果につながる可能性があります。

あなた自身で数字を丸めるか、49.8957515のような詳細に進んでください。これは時々動作します。