3

以下是我正在开发的网站的部分 CSS 代码。 .textbox:hover 部分在本地工作正常，但当我将其上传到服务器时却不行。

文本框是一些动画并应在悬停时暂停的文本。动画的其余部分工作正常，但悬停部分没有。我首先认为存在一些浏览器不兼容问题，但看起来它是另外一回事，因为它在所有浏览器上都一样。任何帮助将不胜感激。

/* CSS for textbox */    

.textbox
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}

.textbox:hover
{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;    
}

@keyframes myfirst    {
    0% {background:48D1CC; left:0px; top:0px;}
   25% {background:yellow; left:200px; top:0px;}
   50% {background:blue; left:200px; top:200px;}
  100% {background:#DCDCDC; left:0px; top:0px;}
}

@-webkit-keyframes myfirst { /* Safari and Chrome */
    0% {background:#DCDCDC; left:0px; top:0px;}
   25% {background:yellow; left:200px; top:0px;}
   50% {background:blue; left:200px; top:200px;}
  100% {background:#DCDCDC; left:0px; top:0px;}
}
4

1 回答 1

3

正如@Adam 上面所说，服务器版本中可能会提供另一个资源。检查页面源，检查 Firebug 或 Chrome 开发工具等中的网络调用，以查看实际交付的资源。也可能是您的代码根本没有交付——当您尝试从服务器加载资源时是否存在网络错误（例如 404 或 500）？

假设它实际上被传递到您的浏览器并且没有其他资源冲突，那么页面本身呢？您的页面上下文和 CSS 选择器链在本地和远程版本中是否相同？例如，如果您的服务器版本由多个组件（例如，页眉、侧边栏、页脚、内容、小部件等）组装一个页面，则组装过程可能会嵌套您的组件，与您仅加载组件时在本地显示的方式不同，并且您的 CSS 选择器可能会以不同的方式进行交互。

于 2013-10-08T19:27:51.483 回答