CSS 在 Chrome 网络浏览器中不起作用答案

【问题标题】：CSS not working in Chrome web browserCSS 在 Chrome 网络浏览器中不起作用
【发布时间】：2015-02-16 08:39:55
【问题描述】：

正如标题所示，我有一个网页，我在 Google Chrome 中对其进行了测试，但 CSS 不起作用。然后我回去检查我是否已将 CSS 文件正确链接到 HTML 文件，并且我有。然后我尝试在 Firefox 网络浏览器中打开它，它工作正常。谁能告诉我为什么它不能在 Chrome 中运行但在 Firefox 中运行？

CSS 文件：

    #news {
    margin-top: 60px;
    text-align: center;
}
#newsp {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    position: absolute;
    float: left;
    padding-right: 10px;
}
#thankyou {
    margin-top: 200px;
    font-size: 15px;
    text-align: center;
    color: gray;
}
#websiteul {
    list-style-type: none;
}
#websitelist {
    float: right;
    margin-right: 20px;
}

【问题讨论】：

我们需要更多细节。 CSS 文件中有什么？也许你正在使用一些 Chrome 引擎会忽略的特定于 Firefox 的 CSS 规则。
@doldt 我在css文件中添加了。
似乎没有什么特别的......当你在 Chrome 中打开开发者控制台，并检查一个应该有一些 CSS 样式的 DOM 元素（右键单击，检查元素），你能看到右侧出现的 CSS 规则吗？
您可以创建 JSFiddle，以便更好地理解您的代码吗？
@Javy 根据您的 css，我认为 margin-top 似乎在 chrome 中不起作用。要在 chrome 中工作，请使用“-webkit-margin-before”样式。

标签： html css google-chrome

【解决方案1】：

我看不到动画，但这里有一个动画，例如：

#first-child {
   width: 200px;
   height: 200px;
   background: white;
   -webkit-animation: myfirst 1s;
   -moz-animation: myfirst 1s;
   animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
    0% {background: white;}
   50% {background: white;}
  100% {background: red;}
}
@keyframes {
    0% {background: white;}
   50% {background: white;}
  100% {background: red;}
}

还有 HTML：

<div id="first-child"></div>

如果你想让动画在 chrome 中运行，你应该使用-webkit-animation，如果你想让它在 Firefox 中运行，你应该使用-moz-animation，就像在代码中一样

【讨论】：