3

Safari でウィンドウの幅を変更すると、右側の最後の div ボックスが 100% 整列されず、最後のdivボックスとウィンドウの境界線の間に 1 ～ 3 ピクセルのスペースが配置されます。

Safari を見て、幅のサイズを変更してみてください: http://jsfiddle.net/LPXfe/2/

スペースを修正する方法はありますか？

.html,
body {
  width: 100%;
  height: 100%;
}

.outside {
  width: 100%;
  min-height: 500px;
  position: relative;
  display: inline-block;
}

.inside {
  width: 25%;
  height: 299px;
  position: relative;
  float: left;
  background-color: #dcdcdc;
}
<div class="outside">
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
</div>

4

2 に答える 2

0

これはどうやら Safari ブラウザー (主に iOS) の問題です。

状況を修正するために CSS を作り直しました。これは最も理想的ではありませんが、ブラウザーが適切にレンダリングしない場合は、調整する必要があります。

.outside ボックスと .inside ボックスの位置関係を削除し、overflow-x:hidden を html の body タグに追加しました。これにより、水平スクロールが防止されます。次に、.outside の幅を 101% にしました。これにより、ボックスが押し出され、問題のあるピクセルが非表示になります。

html, body {
    margin:0;
    width:100%;
    overflow-x:hidden;
}

.outside {
    width:100.5%;
    height: 500px;
    overflow:hidden;
    background: #009900;
}
.inside {
    width:25%;
    height: 299px;
    float: left;
    background-color: #990000;
}

これは、更新されたスタイルのjsFiddleです。サンプル コードでは、背景の色をより対照的な色にしました。

于 2013-04-21T05:58:47.397 に答える