2

今日、私は次のようなスタイルのシンプルなボックスに出くわしました。

div.menubox {
    background-color: #FFFFFF;
    border: 1px solid #887777;
    border-radius: 0 5px 5px 0;
    box-shadow: 1px 1px 3px #998888;
    font-family: Lato,sans serif;
    font-size: 12px;
    left: -5px;
    margin-bottom: 2em;
    min-height: 675px;
    overflow: hidden;
    padding: 25px 0 2em;
    position: absolute;
    top: 195px;
    transition-duration: 0.5s;
    transition-property: top;
    width: 215px;
    z-index: 99;
}

ulといくつかが含まれていますli。メニューボックスの高さをコンソールに印刷するようにfirebugに依頼するまで、例外的なことは何もありません。

console.log(document.getElementById("menubox").offsetHeight)未処理の「677.2px」を返します 。

このような奇妙な動作を踏むのは初めてです（古いWindows XPインストールで、Firefox 17、Firebug 1.10.6、多数のプラグインを実行しています）。

これは、コンポーネントの1つまたは新しい「機能」の既知の問題ですか？

補遺

border-shadow、border-radius cssプロパティ（firebugによって無効化）を削除しても、結果は変わりません。

chromeレポート"649.5999755859375px"うーん...基に
なるJavaScriptコードをさらに調査する必要があります

EXTRA Ops、javascriptコードは変数を埋める締め切りでした、本当のコードはconsole.log（document.id（ "menubox"）。getStyle（ "height））`なので、mootools 1.4.5が主に疑われます（手動で発行）コンソールのコマンドは、両方のブラウザで整数のピクセル数を返します）。

質問はまだ生きていますが、同様の動作に遭遇したことがありますか？回避策があります（結果を手動で丸める以外に）？

4

1 に答える 1

0

ピクセルの小数部分は、画面上の「点」ではなく角度の測定値であるため、CSSでは奇妙ではありません。

CSS 2.1のドキュメントから：

「ピクセル単位は、表示デバイス、つまりほとんどの場合コンピュータディスプレイの解像度に関連しています。出力デバイスのピクセル密度が通常のコンピュータディスプレイのピクセル密度と大きく異なる場合、ユーザーエージェントはピクセル値を再スケーリングする必要があります。参照ピクセルは、ピクセル密度が96dpiで、アームの長さのリーダーからの距離がデバイス上の1ピクセルの視覚的角度であることが推奨されます。したがって、公称アームの長さが28インチの場合、視覚的角度は約0.0213度になります。 」</p>

詳細については、http：//inamidst.com/stuff/notes/csspxをご覧ください。

私の推測では、em：sとpx：sを混在させていると、断片化されたピクセル値が返されます。動作に問題はありませんので、トラブルが発生しない限り気にしないでください。特に、DOM要素に最小の高さを定義しただけなので。

于 2012-11-25T10:33:38.127 に答える