Question

我在我正在开发的插件中发现了一个问题。当百分比完全相加时，框之间有一个空格。此问题也只出现在某些宽度上 - 调整.wrapper div的宽度实际上会正确显示项目。

为什么会这样？为什么看起来只有一定的尺寸呢？
我该如何解决？我不能简单地调整.wrapper

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

链接到小提琴：https://jsfiddle.net/4pve7ws4/

Answer 1

宽度和其他数字四舍五入为整数像素，有时这会导致意外结果。

你应该自己对这些数字进行舍入，或者尝试进一步了解49.8957515等细节，这些细节有时会有效。

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

1 个答案: