このページとこのページは、ヘッダーの上にスペースがあります。それらは更新後に表示されたばかりですが、問題がどこにあるのかわかりません。
注: これは FireFox でのみ発生します。
またはクラスcolumns
全体を から削除します。そこには何の役にも立たず、ロゴ用に少しだけ残します。それが見逃すすべてです。現在、CSS スタイルと競合しています。sixteen columns
header
padding
.columns
または、ヘッダーのみに適用されるそのクラスの css を書き直すこともできます。
Chrome で列クラスを削除し、Mac で ff を削除した後:
最初に確認することは、マークアップが有効かどうかです。 w3c validator によると、どこかで閉じられていませんdiv
。私の経験では、これはまさに、異なるブラウザーで異なる表示を引き起こすようなものです。
から削除margin-top: 16px;
し#header
ます。
padding-top: 5px;
から も減らし#header .inner
、
このクラスの .column、.columns float:left; および display:inline が問題を引き起こしています...これらの2つのプロパティを削除してみてください。ただし、他の場所に影響を与える可能性があります.. そのため、ヘッダーのみに影響します。
#header {clear: both; display: inline-block; float: none; margin-top: 16px;}
.column, .columns {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
このクラスfloat:left
では、内部は冗長です。削除すると、彼は正常です。そしてそれを別々に書くための2つのクラス。このような:
.columns {
margin-left: 10px;
margin-right: 10px;
}
.column{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
問題が見つかりました。私が持っていた
#artists {margin-bottom: 40px}
#album-design {margin-bottom: 40px}
私はそれを次のように変更しました:
#artists {padding-bottom: 40px}
#album-design {padding-bottom: 40px}
これが問題であることはわかっています。これはポートフォリオと音楽ページでのみ発生していたためです。その特定の CSS を使用するのは 2 つのページだけです。
誰かがそれをチェックする気がありますか?
すべての答えをありがとう。ほとんどの人は、私が修正する他の問題を知らせてくれます。
皆さん、ありがとうございました。