在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-box;的内容。尝试将该行放入标题属性中，并希望它有所帮助。请注意，background-origin属性在IE 5,6,7或8 ...

中不起作用