javascript - ChromeとFirefoxで高さの計算が異なりますか？

Question

したがって、ChromeとFirefoxの両方でwww.qualificationcheck.comを見てください。Altキーを押しながら、小さな緑色の「ヘルプとフィードバック」サイドタブに焦点を合わせて、それらの間をすばやく前後に移動します。

位置が動いているようです！なぜこれ？

サードパーティのJavascriptファイルに含まれています。私はそれがどのようにその位置を計算するかを理解するためにそれを調べました。

まずtop: 50%、ビューポートの約50％を取得するように設定します。

それからそれは設定します

margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")

つまり、タブの高さのマイナス半分であるため、タブはわずかに上にシフトします。そのため、タブの「中央」は、実際にはビューポートの50％下にあります（「上部」ではありません）。

Chrome開発ツールを使用してFirefoxでfirebugを使用すると、Chromeではmargin-topが-33pxになり、Firefoxでは-87pxになることがわかります。

なぜ違いがあるのですか？

自分のタブをその上または下に追加したいのですが、サードパーティのタブが常に同じ位置にあると信頼できない場合、自分のタブをどこに配置するかを決定できません。

score 1 · Accepted Answer

申し訳ありませんが、他の回答はどちらも役に立ちませんでした。

私は基本的にサードパーティのjsをコピーし、それを微調整して、それと新しいタブを1つにまとめることでこれを解決しました。

したがって、基本的には、問題への回答ではなく、単なる回避策です。

score 0 · Accepted Answer

padding-top：？pxを追加してみてください。これは、FirefoxとChromeの両方で同じである必要があります。ネット上の何人かの人々は、マージン崩壊に関する同様の問題を報告しています（明らかにバグではありません）：

score 0 · Accepted Answer

Firefox（および最近からChrome）は、マージンとパディングを異なる方法で解釈します。マージンとパディングの値がdivの高さ/幅に追加されます。これをcssに追加することで（少なくともFFの場合）これを修正できます（一番上に配置します）。

DIV {
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

3 に答える 3