1

我正在构建一个类似于日历的页面，其中包含表示时间段的网格单元格，然后约会块覆盖用户可以创建的网格。这是小提琴，这是小提琴的代码

HTML

<div class="container">
<div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    ...
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="block" style="width:48px;left:-1px"></div>
    <div class="block" style="width:48px;left:149px"></div>
    <div class="block" style="width: 198px; left: 249px;"></div>
    <div class="block" style="width: 48px; left: 549px;"></div>
    <div class="block" style="width:48px;left:1099px"></div>
</div>
</div>

CSS

.container {
  min-height:100px;
  overflow:auto;
  border:1px solid #000000;
  -ms-overflow-y: hidden;
  overflow-y: hidden;
  width: 400px;
  position:relative;
}

.row {
  position:relative;
  height:20px;
  width: 1200px;
  margin-top: 2px;
  margin-bottom:2px;
}

.cell {
  height:18px;
  float:left;
  border:1px dotted #DDDDDD;
  text-align:center;
  width: 48px;
}

.block {
  position:absolute;
  height:16px;
  border:2px solid #236B8E;
  background-color: #A7C4D2;  
  border-radius: 5px;
}

我的问题是，在某些浏览器中（以及在我测试过的所有浏览器中的非 X00% 缩放级别），与等效数量的网格单元格相比，绝对定位的约会块与其容器左侧的距离不同.

例如，其中一个块有left: 549px;（不是 550px，因为 2px 边框）。所以它应该精确定位在第 12 个网格单元格 div 上。当缩放设置为 100%（XP SP3 上的 Chrome 30）时就是这种情况，但将其设置为 150% 并且不再与网格单元重叠。将其设置为 200% 就可以了。等等...

更糟糕的是，在某些浏览器/操作系统组合上，即使在 100% 缩放时也不能很好地呈现 - Win 7 64 位 SP1 上的 Firefox 25 就是这样一种组合（其中 FF22 和 25 在 XP SP3 上都很好）。

请注意，我的 Xoom Android 平板电脑上的捏缩放没有这样的问题（我尝试了标准的 Android 浏览器和 Chrome）。

我猜这是由这样的事情引起的-即绝对定位项目的左/宽度值（块：48px + 2px 边框 = 52px 以 -1px 偏移定位）与浮动项目（网格单元格：48px + 1px 边框= 50px 每个）乘以 150% 等时会产生不同的舍入误差。

或者也许是因为浮动定位与绝对定位？我不太相信这一点。

有什么想法可以让我获得合适的跨浏览器/操作系统解决方案，该解决方案也适用于非 X00% 缩放级别？

编辑：我的预感是错误的。绝对定位网格单元有效，至少在 XP 上的 Chrome 上。 小提琴来证明这一点。

4

0 回答 0