Chrome中的CSS错误：如何删除项目之间的空间

Question

I have found an issue in a plugin I am developing. There is a space between the boxes when the percentages add up exactly. This issue also only arises at certain widths - adjusting the width of the .wrapper div will in fact display the items correctly.

1. Why does this happen? And why is it seemingly only at certain sizes?
2. How do I fix it? I can not simply adjust the width of the .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> 

Link to fiddle: https://jsfiddle.net/4pve7ws4/

Answer 1

The width and other numbers get rounded to an integer number of pixels, sometimes this can lead to unexpected results.

You should round the numbers yourself, or try to go further in details like 49.8957515 which sometimes works.