0

ヘッダーがグラデーションで、最初の読み込み時にすべてが完全に正常に見えるページがあります。ページを更新すると、グラデーションが台無しになり、以下の 2 つのグラデーション (1 つは非常に小さい) の例が表示されます。

ここに画像の説明を入力

1 つ目はリロード後、2 つ目は最初にページにアクセスしたときです。

私が望まない上部の小さなグラデーションは、その div のパディングと同じ高さです。

また、このようにリロード時に imgs のサイズが変更されることにも気付きました。css で高さを設定することで解決しました。高さは動的でなければならないため、CSSで高さを設定できません。

なぜこれが起こっているのか、そしてそれを解決する方法を誰かが私に説明できますか? jqueryを使用して解決する方法をすでに知っているので、JavaScript以外のソリューションを本当に好みます。

いくつかのコード:

HTML:

<header>
      <a id="settings-gear" href="#"><img src="/img/gear.png"> &nbsp;</a>
      <div id="logo">
        <img src="logo" alt="logo">
    </div>
</header>

CSS:

header {
    background: -webkit-linear-gradient(top, #F0F7F7 0%,#B8D9DD 100%);
    max-height: 122px;
    padding: 12px;
    position: relative;
    display: block;
}

header #logo img {
    display: block;
    margin: 0 auto;
}

header #settings-gear img {
    height: 33px;
}
4

1 に答える 1

0

うーん、リンクや作例が見れないと難しいのですが、まず思いつくのは、背景を画像にして、内容だけに合わせてbackground-origin:content-box;. その行をヘッダー プロパティに入力してみてください。このbackground-originプロパティは IE 5、6、7、または 8 では機能しないことに注意してください...

于 2013-04-02T12:17:48.027 に答える