5

http://i.imgur.com/WnRm9aw.png

行の高さの問題のようです。CSS リセットに line-height:1 があり、これが問題を引き起こしているようです。ただし、その要素に特定の行の高さ (ピクセル単位) を設定しても、まだ違いがあります。

CSS リセットから line-height プロパティを完全に削除すると、実際には両方のブラウザーでギャップが等しくなりますが、Chrome ではオレンジ色の背景 (親) が 6 ピクセル引き伸ばされます。

回避策はありますか？ありがとう

4

1 に答える 1

2

ブラウザーが CSS を異なる方法で解釈するという多くの問題に遭遇しました。1 つのオプションは、Chrome がユーザー エージェント スタイルシートを介して要素に余分なパディングを追加しているかどうか、またはそのレンダリング プロセスによって確認することです。もしそうなら、効率的な解決策のためにこれを試してみることができます: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start

あまり望ましくない別の可能性は、CSS でこれを行い (Webkit ブラウザー、つまり Chrome と Safari を検出します)、パディング スタイルをオーバーライドして、両方のブラウザーで同じように表示されるようにすることです。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourDiv {
        padding: 2px;
    }
}
于 2013-10-27T02:27:28.010 に答える