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% ズーム レベル) では、絶対に配置された予定ブロックが、コンテナーの左から同じ数のグリッド セルと比較して同じ距離をレンダリングしないことです。 .

たとえば、ブロックの 1 つにleft: 549px;(2 ピクセルの境界線があるため 550 ピクセルではありません)。したがって、12 番目のグリッド セル div の真上に配置する必要があります。これは、ズームが 100% (XP SP3 の Chrome 30) に設定されている場合ですが、150% に設定すると、グリッド セルと重ならなくなります。200% に設定すると、再び問題ありません。等々...

さらに悪いことに、一部のブラウザー/OS の組み合わせでは、100% ズームでもうまくレンダリングされません。Win 7 64 ビット SP1 の Firefox 25 はそのような組み合わせの 1 つです (XP SP3 では FF22 と 25 はどちらも問題ありません)。

私の Xoom Android タブレットでのピンチ ズームでは、このような問題は発生しなかったことに注意してください (標準の Android ブラウザーと Chrome を試しました)。

これは次のようなことが原因であると推測しています。つまり、絶対配置されたアイテムの左/幅の値 (ブロック: 48px + 2px の境界線 = -1px のオフセットで配置された 52px) とフロートされたアイテム (グリッドセル: 48px + 1px の境界線) = それぞれ 50px) 150% を掛けると、さまざまな丸め誤差が発生します。

それとも、フローティングと絶対配置のせいでしょうか? 私はそれについてあまり確信が持てません。

非 X00% ズーム レベルでも動作する適切なクロスブラウザー/OS ソリューションを取得する方法はありますか?

編集：私の勘は間違っていました。少なくとも XP 上の Chrome では、グリッド セルの絶対配置が機能しました。 それを証明するためにフィドル。

4

0 に答える 0