我有以下 html:
<div id="loadinganimationsearch">
<div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div>
<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>
<br>
</div>
这是 HTML 生成的内容:
现在我有以下 CSS,当浏览器运行时 loadinganimationsearch
在 chrome 和 firefox 中没有显示。
#loadinganimationsearch {
display: none;
}
但现在当我在 Safari 5.1.7 中运行它时,由于某种原因它似乎几乎忽略了 CSS。为什么会发生这种情况,我该如何解决?
最佳答案
四处寻找,找到了罪魁祸首:
@-moz-keyframes move {
0% {
-moz-transform: scale(1.2);
opacity: 1;
}
100% {
-moz-transform: scale(0.7);
opacity: 0.1;
}; /* This semicolon shouldn't be here */
}
@-webkit-keyframes move {
0% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(0.7);
opacity: 0.1;
}; /* This semicolon shouldn't be here */
}
动画关键帧百分比后不应有分号。应该是:
@-moz-keyframes move {
0% {
-moz-transform: scale(1.2);
opacity: 1;
}
100% {
-moz-transform: scale(0.7);
opacity: 0.1;
}
}
@-webkit-keyframes move {
0% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(0.7);
opacity: 0.1;
}
}
我推测在Safari解析分号后,下面的CSS都不生效。
关于html - Safari 不运行 css 显示 :none property,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28142630/