Question

环顾四周，并没有发现任何类似的东西 - 发现这真的很奇怪。

我在页面底部的菜单上加载了一个简单的动画，在加载后将文本向上滑动几秒钟（以允许其他动画完成）。这在firefox，IE，android浏览器和chrome for android上都能正常工作。但是当我在桌面Chrome（44）上进行测试时，它并不起作用。

当我第一次加载页面时（清除缓存/隐身），动画将起作用。但是每次我加载页面时，它都会破坏 - 我不知道为什么。

只有当我在链接中的div中包装其中一个跨度时才会发生这种情况。

动画如下：

@-webkit-keyframes fadeInBottom {
    0% {
       opacity: 0;
       -webkit-transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInBottom {
    0% {
       opacity: 0;
       -moz-transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       -moz-transform: translateY(0);
    }
}

@keyframes fadeInBottom {
    0% {
       opacity: 0;
       transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
}

跨度的css：

.basePanel{
    z-index:999;
    height: 5vw;
    width: 100vw;
    position:absolute;
    bottom:0;
    font-size:4vw;
    color:#f1f8f0;
    display:inline-block;
    font-family:coda, courier;
    -webkit-animation-name: fadeInBottom;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-delay:1.8s;
    -moz-animation-name: fadeInBottom;
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1.3s;
    -moz-animation-delay:1.8s;
    animation-name: fadeInBottom;
    animation-fill-mode: both;
    animation-duration: 1.3s;
    animation-delay:1.8s;

}
#contact{
    padding-top: 15vh;
    position:relative;
    font-family:coda, courier;
    text-align:left;
    color:#f1f8f0;
    font-size:6vw;
}
.button{
    position:relative;
    text-align:center;
    width:32.1vw;
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

.button:hover{
    background-color: #252c24;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    -ms-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.centre{
    width:32.15vw;
}

和相关的html：

<div class="basePanel">
    <span class="left basePanel button">About</span>
    <span class="centre basePanel button">Portfolio</span>
    <a href="contact">
        <span class="right basePanel button">Contact</span>
    </a>
</div>

以下是相关HTML和CSS的小提琴：https://jsfiddle.net/bqLLqbwc/

令人讨厌的是，这实际上适用于Chrome。要查看已损坏的页面，以下是我正在处理的实际网页：http://www.devox.org

我已经在两台计算机上进行了测试，一台运行Windows 7，另一台运行ubuntu 14.04，两台都运行chrome 44。

Answer 1

所以我最终重组了html。

虽然感觉在<div>标记中包装<a>标记会更容易，但它似乎无法在Chrome中运行。也许它打破了HTML5之前的遗留漏洞。我不知道。

因此，我将<a>标记包装在<span>标记中并更改css以使其填充div并删除任何装饰：

HTML：

<span class="right basePanel button"><a href="contact">Contact</a></span>

的CSS：

.button a{
    color: #f1f8f0;
    display:block;
    height: 100%;
    width: 100%;
    text-decoration:none;
}

.button a:visited{color:#f1f8f0;}

这似乎工作正常。

刷新

1 个答案: