Question

嘿伙计们。我有这个页面，徽标有问题。当你向下滚动以便徽标变小然后再向上时它应该再次变大。它在safari等上工作正常，但不适用于chrome。如果我右键单击它，它将是它需要的。但它需要像野生动物园一样自己做。谁能告诉我这是什么问题？

<div class="site-logo">
                        <a href="/">
                            <img src="/assets/images/kvejborg-logo.svg" alt="Kvejborg ApS logo">
                        </a>
                    </div>

@media screen and (min-width: 64em)
.site-logo img {
    width: auto;
    height: 100%;
}

Answer 1

在logo / img上添加display: block;似乎可以解决问题

Answer 2

您是否尝试添加支持Chrome所有主流浏览器的代码行？它应该看起来像这样

 nav {
  background-color: red;
  background-image: url(gradient-slice.png);
  background-image: -webkit-linear-gradient(top right, #A60000, #FFFFFF);
  background-image: webkit-linear-gradient(top right, #A60000, #FFFFFF);
  background-image: -moz-linear-gradient(top right, #A60000, #FFFFFF);
  background-image: -ms-linear-gradient(top right, #A60000, #FFFFFF);
  background-image: -o-linear-gradient(top right, #A60000, #FFFFFF);
  background-image: linear-gradient(top right, #A60000, #FFFFFF);
}

-webkit- prefixed属性可用于基于WebKit的浏览器，例如Chrome和Safari -moz-前缀属性可以在Firefox中使用 -ms-前缀属性将在Internet Explorer中使用 -o-前缀属性将在Opera中运行

标志 - 小或大不会工作

2 个答案: