在 chrome 中重新加载页面会弄乱渐变答案

【问题标题】：Reloading page in chrome messes up gradient在 chrome 中重新加载页面会弄乱渐变
【发布时间】：2013-04-01 20:21:50
【问题描述】：

我有一个页面，其中标题是渐变的，在第一次加载时，一切看起来都很好。当我刷新页面时，渐变变得混乱，它似乎在下面放入了 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;
}

【问题讨论】：

您能否提供指向违规 URL 的链接以供检查？
能否发一些代码或网址，谢谢！
在这种情况下，可能需要指向实时页面的链接，或者重现问题的演示。
恐怕链接是不可能的。我尝试创建一个重现问题但未成功的 jsfiddle。

标签： html google-chrome css gradient

【解决方案1】：

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

【讨论】：

我试图避免使用图像作为我的渐变。我有我的理由，但感谢您的反馈。