Question

我正在使用一个新网站，但是当我的朋友在Firefox上对其进行测试时，其中一项功能无法正常工作。

我们发现css在firefox中不起作用，但在Chrome中却起作用。

我们尝试过 -webkit-和-ms-

 #separator{      width: 10px!important; max-width: 60px!important; height: 10px; background:red;}

  @keyframes in-out {
         from { width: 10px;
        }
              10%, 100% {
                  width: 60px;
              }
        to{ width: 60px; }
    }
  #separator {
        animation-name: in-out;
      animation-duration: 8s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-delay: 2s;
      }

我正在尝试使其在两种浏览器上均可使用

Answer 1

您编写的CSS属性有很多错误。请在fiddle中找到更新的代码。这些应该是要使用的属性。

 #separator {
   height: 10px;
   background: red;
   -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
 }

@-webkit-keyframes mymove {
  0% { width: 10px; }
  100% { width: 100px; }
}

/* Standard syntax */
@keyframes mymove {
  0% { width: 10px; }
  100% { width: 100px; }
}

Answer 2

它不起作用，因为您声明了错误的属性。

firefox所需的声明只是动画。只有Chrome和Safari才需要-webkit-前缀来实现CSS3效果。

因此您的代码应为：

   <div *ngFor="let externalLink of edited.externalLinks">
        <input #xctrl="ngForm" type="text" class="form-control" id="extId" required 
          [(ngModel)]="externalLink.extId" ngControl="linkExtId_{{externalLink.id}}">

        Valid status is {{xctrl.control.valid}}
   </div>

参考： http://www.w3schools.com/css3/css3_animations.asp

CSS浏览器兼容性Firefox无法正常工作

2 个答案: