1

Internet Explorer 11 で、要素のオーバーフローを引き起こすサブピクセル レンダリングに問題があります。

サブピクセル レンダリング エラー IE、Chrome、FireFox

ご覧のとおり、IE11 ではゲージの赤い部分が下から「のぞいている」ように見えますが、他の 2 つの主要なブラウザーである Chrome と FireFox では問題ないように見えます。

IE で問題を拡大すると、何が起こっているかがわかります。

サブピクセル レンダリング エラー IE、ズーム

マスクの上にサブピクセルをレンダリングしているようです。
ヘッダー「Temperature」は高さ 34.5 ピクセルの要素としてレンダリングされ、その下にあるすべての要素が 0.5 ピクセル下にシフトされ、この問題が発生します。

これがゲージの構築方法です: JSFiddle

<div id="temperature-gauge" class="gauge-control" data-percentage="0">
    <div class="header">Temperature</div>
    <div class="gauge-elements">
        <div class="gauge">
            <div class="inner"></div>
            <div class="spinner temp"></div>
        </div>
        <div class="pointer"></div>
        <div class="pointer-knob"></div>
    </div>
    <div class="indicator">60&deg; C</div>
</div>

ヘッダーに静的な高さを与えて、下にあるすべての要素がフルピクセルになるようにする以外に、これを解決する方法はありますか?

4

2 に答える 2

0

line-heightを要素の と同じに設定しfont-size、これらが両方とも整数でピクセル単位であることを確認することをお勧めします。また、フォント サイズに を使用するpt代わりに を使用してみpxて、役立つかどうかを確認してください。

于 2015-06-28T10:44:06.657 に答える