FF46、IE11,如果元素没有设置border,动画里的border属性就无效,bug?

来源:9-1 CSS3 Keyframes介绍

慕粉3160836

2016-06-08 11:52

别的属性,比如color,margin,padding没有这个问题。

写回答 关注

2回答

  • 慕粉3160836
    2016-06-12 09:50:32

    (回复不能超过300字,只能放这了)

    你试试这个链接~
    http://jsbin.com/cufadet/edit?html,css,output
    我3个浏览器都试了,把border样式的注释去掉,3个浏览器效果一样,加上注释的话,ff和ie上border就没效果了。
    如果链接打不开的话,下面是代码
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <style type="text/css">
          div{
            width: 300px;
            height: 200px;
            background: red;
            /*border:0px solid #000;*/
          }
          @keyframes change{
            0%{
              margin:0px;
              color:#000;
              border:0px solid #000;
            }
            100%{
              margin:50px;
              color:yellow;
              border:10px solid #000;
            }
          }
          div:hover{
            animation:change 2s ease;
          }
        </style>
      </head>
      <body>
        <div>鼠标移入的时候尽量放在div右下角~</div>
      </body>
    </html>

  • 阿聪M
    2016-06-08 20:23:09

    看到这问题回去翻了翻以前的代码,发现以前都是规规矩矩的有什么属性全加上去,不过这问题为什么我测试没有

    阿聪M 回复慕粉3160...

    按你的代码我试了下,貌似都没问题,ie我没试,别人一台ie8的电脑没效果。我估计是浏览器没更新,嘻嘻,我也是刚学h5,抱歉刚看到

    2016-06-28 16:08:23

    共 2 条回复 >

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242213 学习 · 2623 问题

查看课程

相似问题