CSS一个元素在页面更改时恢复

Question

我得到了这个奇怪的CSS错误。这几乎看起来像是一个缓存问题或带有chrome的东西，因为我无法在本地复制。

我向用户发送邀请，如果他们转到邀请页面，然后返回显示横幅的任何其他页面，则显示错误，因为一行文字是新罗马的。

只有在您之前没有访问过该网站并且您转到邀请页面然后再点击返回任何其他包含横幅的网页时，才会出现该错误。

我注意到的两件事非常不寻常，而且我很难理解：

• 显示不正确的文字是<a>中的一个字词 元素，但文本的一部分是好的。

• 当我打开检查器并切换元素的css的任何部分时。 它会重置它应该如何立即显示。

以下是一些图片：

横幅看起来如何

通常/看起来如何

包含按钮的<a>标记

作为旁注，我使用的是没有涡轮连接的镀铬和导轨4。这是按钮的代码：

.childminder-banner .btn {
    padding: 3px 1em;
}

.btn-blue {
    background: #34A9CD;
    color: white;
}

.btn {
    color: white;
    -webkit-transition: none .1s ease-out 0s;
    transition: none .1s ease-out 0s;
    -webkit-transition-property: color,background,border;
    transition-property: color,background,border;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    position: relative;
    display: inline-block;
    line-height: 1.5;
    font-family: "Gordita";
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: border-color .1s ease-out,background-color .1s ease-out,color .1s ease-out;
    transition: border-color .1s ease-out,background-color .1s ease-out,color .1s ease-out;
    background-color: #FF8027;
    border-color: #FF8027;
}

Answer 1

为锚标记display:inline-block

添加样式

a{
   display:inline-block;
 }