我有一个页面，其中标题是渐变的，第一次加载时一切看起来都很好。当我刷新页面时，渐变变得混乱，看起来它在下面放入了 2 个渐变（1 个非常小）示例：
第一个是重新加载后，第二个是第一次点击页面。
我不想要的顶部的小渐变与该 div 中的填充高度相同。
我还注意到 imgs 在像这样的重新加载时也会调整大小，我已经通过在 css 中设置高度来解决这个问题。我无法在 CSS 中设置高度，因为高度应该是动态的。
谁能向我解释为什么会发生这种情况以及解决它的方法？我真的更喜欢非 javascript 解决方案，因为我已经知道如何使用 jquery 来解决。
一些代码：
HTML：
<header>
<a id="settings-gear" href="#"><img src="/img/gear.png"> </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;
}