1

次のコードは、IE と Chrome、および FireFox のほとんどのインストールで、offsetHeight に対して 15 を生成しますが、FF が 14 を生成するいくつかのケース (これまでのところ 3 台のコンピューター) に遭遇しました。同じ結果。

<html>
<head>
<style type="text/css">

body {
    font-size: 12px;
}
</style>
</head>

<body>
    <span id="abc">ABC</span>

<script>
console.log(document.getElementById('abc').offsetHeight);
</script>

</body>
</html>

テキストの実際のピクセルの高さを比較しましたが、ブラウザー間で同じです。テキストの周りに境界線を配置すると、Chrome はテキストの上部と上部の境界線の間に 3 ピクセルを残していることがわかります (下部も同じです)。一方、FF は上部に 2 ピクセル、下部に 3 ピクセルを残します。何か案は？

4

3 に答える 3

1

あなたのコードは"quirks mode"でレンダリングされています。doctype標準モードをトリガーするには、最初の行にa を追加してみてください。これにより、レンダリングにおけるいくつかの癖が解消されるはずです。また、他のいくつかのブラウザーの癖を正規化するために、CSS のリセットも検討してください。

<!DOCTYPE html>
<html>
    <head>

また、標準モードをトリガーするために DTD は必要ないことにも言及する必要があります。doctype 宣言のみが必要です。

DOCTYPE は、一般的なブラウザーで「標準モード」をトリガーするためだけに、「ほとんど役に立たないが必要な」ヘッダーとして HTML5 に保持されます。

于 2012-07-23T21:43:46.657 に答える
1

厳密な doctype を使用し、css リセットを実行します。

* {
    margin: 0;
    padding: 0;
}
于 2012-07-23T21:45:19.070 に答える
0

などのインライン要素の問題<span/>です。

この css を追加すると、#abc 要素の行の高さが制限され、その表示タイプがインライン ブロックに変更されるため、いくつかの点でインライン要素のように動作できます。

#abc {
    display: inline-block;
    line-height: 12px;
}

これは私が思いつく最善の解決策であり、すべてのブラウザが同意しているようです。.offsetHeight と .offsetWidth がクロス ブラウザーで一貫性がないことは既知の事実ですが、W3C のドキュメントやバグ レポートに飛び込むことなく、問題をインライン要素に切り分けることしかできませんでした。

于 2012-07-23T21:57:19.110 に答える