css - 上記の div で clearfix を使用すると、Chrome でフッターがおかしくなる

Question

フッターの上にある clearfix div を削除すると、Firefox の場合と同様に、テキストが所定の位置に収まります。

しかし、それは他のものを壊します。そのclearfixがフッターにどのように影響するかはまったくわかりません...

マイページ:

score 1 · Accepted Answer

これらのスタイルルールが関連付けられているため、フッター要素のように見えます。

#footer {
    clear: both;
    font-size: 1.4em;
    height: 150px;
    margin-top: -150px;
    position: relative;
}

ルールを削除すると、margin-top: -150pxChrome がクリアされたように見えます。

#content スタイルでは、padding-bottom: 150px;すべてをかなり押し下げるルールがあるようです。それも少し減らしたほうがいいかもしれません。

あなたの目標がスティッキーフッターである場合、何らかの理由で要素にmargin-bottom: -150px;ルールを追加する#containerと、Firefox、Chrome、および IE で機能しました。ただし、150pxより少し高いと思います。

score 0 · Accepted Answer

最終的に、clearfix div の下に .push div を追加して、高さを 180 ピクセルにしました (150 ピクセルではなく、パディングを使用した正しい高さ)。セマンティックではありませんが、Chrome を修正するようです。

2 に答える 2