Question

当我尝试验证我的网站时，W3C CSS Validator表示解析错误。我真的试图理解我做错了什么，但我真的需要一些帮助。

这就是验证人所说的：

分析错误：@media screen and (min-width: 900px) { @keyframes line_draw{ 100%{ width: 100vh;} }

这是文件中的代码：

Router.navigate({})

Answer 1

正如@BoltClock所说，似乎IE并不能识别@keyframes规则中的@media，因此您可以创建两个不同的@keyframes并更改animation-name @media内的CSS属性这是一个例子：

@keyframes line_draw { /* This is for when the media is not matched. */
    100% {
        width: 100vh;
    }
}

@keyframes line_draw2 {
    100% {
        width: 100vh;
    }
}

#yourElement {
    animation: line_draw 2s;
}

@media screen and (min-width: 900px) {

    #yourElement {
        animation-name: line_draw_2;
    }
}

Answer 2

看起来验证程序无法识别$scope.uploadLast = function () { var data = { excels: $scope.excels, }; $http.post('/api/uploadlast', data).then(function (response) { }).catch(function (response) { alert(response.data); console.log(response); }); }规则中的@keyframes规则。 spec允许这样做，它显然适用于所有浏览器。

如果解析错误让您感到困扰（例如，因为您需要经常验证并且它一直在阻碍），您可以通过交换@media而不是{{1}中的关键帧规则来解决此问题。规则，这也解决了Internet Explorer not supporting @keyframes rules nested in @media rules anyway。

的问题

CSS验证：“解析错误：@keyframes”

2 个答案: