Question

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

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;（因为2px边框而不是550px）。所以它应该恰好位于第12个网格单元格上。当缩放设置为100％（XP SP3上的Chrome 30）时会出现这种情况，但将其设置为150％并且它不再与网格单元重叠。设置为200％，再次没问题。等等...

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

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

我猜这是由this之类的东西引起的 - 即绝对定位项目的左/宽度值（块：48px + 2px border = 52px定位-1px偏移）vs浮动项目（grid cell：48px + 1px border = 50px）当乘以150％等时产生不同的舍入误差。

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

我是如何获得适用于非X00％缩放级别的适当跨浏览器/操作系统解决方案的？

编辑：我的预感错了。绝对定位网格单元工作，至少在XP上的Chrome上。 Fiddle to prove it.

浮动的div以不同的缩放级别呈现与绝对定位的div不同

0 个答案: