-1 
<body style="padding:0px; margin:0px;">
      <div style="width:1016px;">
        <div style="width:8px; height:100px; background:red; width:8px; float:left;"></div>
        <div style=" float:left; border:#ccc solid 1px; height:100px; padding:20px; width:958px;">
            testing 1016=8+1000+8
        </div>
        <div style="background:red; height:100px; width:8px; float:left;"></div>
        <div class="clear"></div>
    </div>
</body>

My html/css で、ブラウザーのズーム時に最後の div がダウンする理由。

4

1 に答える 1

2

私のコメントで述べたように、問題はズーム時のピクセル単位の丸め誤差です。

簡単な例: 99px コンテナーに 33px 幅のボックスが 3 つあり、75% にズームアウトすると、ボックスは (丸められて) 25 ピクセル幅になり、コンテナーは 74 ピクセル幅になります。そして、それは合いません！

.container {
    width:99px;
}
.child {
    float:left; width:31px; height:31px; 
    border:1px solid #666;
}

フィドルを参照してください。(ただし、ブラウザによってズーム倍率が異なると問題が発生することに注意してください。どうやら、すべてが同じように四捨五入されるわけではありません。まあ、少なくとも問題があることがわかります。)

では、何ができるでしょうか？さて、いくつかの解決策があります：

  1. コンテナーを少し広くするか、幅の制約を完全に削除して、ウィンドウと同じ幅にします。その後、ボックスは常に収まります。フィドル。

  2. 別の方法として、幅を指定する代わりに、コンテナーをインライン ブロックにします。これにより、コンテンツにぴったりと収まるようになります。

    .container {
    display:inline-block;
}

    フィドル

  3. 丸め誤差を相殺するのに十分な大きさの負のマージンを右端のボックスに与えます。コンテナの右側に何も表示する必要がない場合は、この余白を好きなだけ大きくしても問題ありません。

    .child:last-child {
    margin-right:-100%
}

    フィドル。

解決策は他にもありますが、これらを参考にしてください。幸運を！

于 2013-10-31T10:50:18.310 に答える