-1

私が取り組んでいるサイトに問題があります。

上部のロゴには、余白がないように具体的に設定し、その親にはパディングがないにもかかわらず、上部に何らかの余白があるようです。

body{
    margin: 0;
    padding: 0;

    min-width: 320px;

    background-image: url('../images/templates/background.png');

    font-family: 'Open Sans';
    font-size: 12px;
    color: #303030;
}

テストしたさまざまなブラウザーの画像を次に示します。

奇数マージン

ご覧のとおり、Opera だけが正常に動作しているようです。今、何か問題がありますか？それともブラウザの問題ですか？

これがブラウザの問題である場合、問題を解決する最も簡単な方法は何ですか?

4

2 に答える 2

1

問題を引き起こしているのは、main.css の 98 行目です。

.menuAvatar {
vertical-align: middle; // THIS LINE
margin: 0 5px 0 -15px;
}

垂直方向の配置が削除されると、画像は正しく配置されます。forを使用していることを達成する別の方法を見つけるかvertical-align、次の方法を使用して補正することができます。

.menuAvatar {
vertical-align: middle;
margin: -3px 5px 0 -15px;
}

-3px を margin-top に追加して、Chrome で強制的に整列させました。(firefox などではテストされていません)。

または、これを使用して負のマージンを回避します。

.menuAvatar {
vertical-align: top; 
margin: 0 5px 0 -15px;
}
于 2013-04-23T14:00:48.490 に答える
0

の 98 行目にmain.css、次のルールがあります。

.menuAvatar{
    vertical-align: middle;
    margin: 0 5px 0 -15px;;
}

vertical-alignに設定することをお勧めしますtop。結果は次のようになります。

.menuAvatar{
    vertical-align: top;
    margin: 0 5px 0 -15px;
}
于 2013-04-23T14:01:26.577 に答える