html - 在 Chrome 中重新加载页面会弄乱渐变

Question

我有一个页面，其中标题是渐变的，在第一次加载时一切看起来都很好。当我刷新页面时，渐变变得困惑，它似乎在下面的示例中放入了 2 个渐变(1 个非常小):

第一个是在重新加载之后，第二个是在第一次访问页面时。

我不想要的顶部的小渐变与该 div 中的填充高度相同。

我还注意到 imgs 也会像这样在重新加载时调整大小，我已经通过在 css 中设置高度解决了这个问题。我无法在 css 中设置高度，因为高度应该是动态的。

任何人都可以向我解释为什么会发生这种情况以及解决方法吗？我真的更喜欢非 javascript 解决方案，因为我已经知道如何使用 jquery 解决问题。

一些代码:

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;
}

Answer 1

好吧，如果我们看不到链接或示例，那会很困难，但我想到的第一个想法是将背景设置为图像，并告诉它仅适合具有 background-origin:content 的内容-框；。尝试将该行放入标题属性中，并希望它有所帮助。请注意，background-origin 属性在 IE 5、6、7 或 8 中不起作用...