3

私は2年前にデザインを書きました。目標は、1024ピクセルの画面に収まるようにすることでしたが、大きな画面では小さすぎないように、グラフィックコンテンツを少し追加しました。その結果が、オープンソースプロジェクトのWebサイトであるhttp://megaglest.org/です。

HTMLは次のとおりです。imgタグを使用したくないのは、そのような画像が読み込まれないレスポンシブデザインで作業できるようになるためです。

<div id='all'>
    <div id="header">
        <div id="header_left"></div>
    </div>
</div>

対応するCSSは次のとおりです。

#all {
    width: 1016px;
    margin: 0 auto;
}
#header {
    height: 313px;
    background-color: #4dd;
}

#header_left {
    float: left;
    width: 140px;
    margin-left: -140px;
    height: 379px;

    /* works fine */
    /* background: #dd4; */

    /* there's a one pixel offet */
    background:
       url("http://megaglest.org/uploads/megaglest2011/header/left.jpg")
       no-repeat; 
}

Google Chrome（Linuxでは22.0.1229.94）でのみ、特定のウィンドウサイズ（#header_leftの一部のみが表示されている場合）でのみ、画像と青いヘッダーの間に1ピクセルのオフセットがあります。「結果ペイン」が非常に広い場合は、このjsFiddleの使用を確認できます：http：//jsfiddle.net/hTbJA/

これが問題のスクリーンショットです。奇妙なことに、Google Chrome開発ツールは「メトリクス」でdivの幅が140ピクセルであると言っていますが、「要素」ペインを使用して#header_leftにカーソルを合わせると、141ピクセルと表示されます。ブラウザのバグでしょうか？

ありがとう。

4

1 に答える 1

6

#header_leftこの問題は、オブジェクトと#header_rightオブジェクトが負のマージンで中心線のエッジを超えて押し出されているという事実によって引き起こされていますが、中央のピースの水平方向marginはに設定されていautoます。

何が起こっているのかというと、bodyが偶数のピクセル幅の場合、幅がauto広いので、両側に偶数のピクセルが中央に配置されます（例：本体が広い場合は使用可能であるため、ブラウザは、左側と右側に割り当てます。次に、ルールを取得します。これにより、の左端の左側に配置され、ピクセル単位で完全に整列します。#header1016pxmargin: 0 auto;1200px184px92px92px#header_leftmargin-left: -140px;140px#header

ただし、bodyが奇数のピクセル幅である場合、たとえば1199px-でmargin: 0 auto;キックインすると、部分的なピクセルが割り当てられます（この場合は91.5px片側のみが生成されます）。オブジェクトは0.5ピクセルで描画できないため、ブラウザはレンダリングを開始する実際の場所に切り上げられ#header、左端はで計算され91.5pxます。次にマージンが要素に入る-140pxと、#header_left別の奇数ピクセルになりますが、今回は計算が切り捨てられます。（内部計算は、おそらく最初の丸め、次に減算によって計算されます）。

これにより、1ピクセルオフの外観が得られます...

修正（シナリオでは）は、#header_leftのmargin-leftCSSルールを--139pxではなくに変更140pxし、わずかに重複できるようにすることです。私はあなたの実際のサイトでそれをテストしました-そしてそれは見栄えが良く、うまく調和しています。

つまり、あなたの質問に答えて、いいえ、これはバグではありません。それ自体は、開発者ツールと要素ペインの計算が異なることを意味します。部分的なピクセルを処理する場合、そのうちの1つは切り上げられ、もう1つは切り下げられます。あるいは、1つは画面上で実際に効果的にレンダリングされるものを測定し、もう1つはCSSルールが示しているものを測定することです。

于 2012-11-02T17:47:38.987 に答える