我有以下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。为什么会发生这种情况?我该如何解决?
答案 0 :(得分:2)
在搜索之后,我找到了罪魁祸首:
@-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中没有一个生效。