CSS3 转换在 Microsoft Edge（和 IE）中不能很好地显示

Question

这里是相当新的网络开发人员。所以我在我的 wordpress 网站上有一个 CSS3 过渡，它在除 IE 和 Edge 之外的所有浏览器中都能正常工作。也不确定该怎么做，因为我无法在我的 Mac 上轻松测试它。

这里是可能影响事物的 sn-ps。首先是从页面开始。

.jumbotron #name {
    margin-left:-200em;
}

.jumbotron #line {
    margin-left:-80em;
}

.jumbotron #occupation1, .jumbotron #occupation2 {
    margin-left:-190em;
}



 @-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(42%, 0, 0);
    transform: translate3d(42%, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(42%, 0, 0);
    transform: translate3d(42%, 0, 0);
  }
}

@-webkit-keyframes slideInLeftLine {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(315%, 0, 0);
    transform: translate3d(315%, 0, 0);
  }
}

@keyframes slideInLeftLine {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(315%, 0, 0);
    transform: translate3d(315%, 0, 0);
  }
}

@-webkit-keyframes slideInLeft2 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(43%, 0, 0);
    transform: translate3d(43%, 0, 0);
  }
}

@keyframes slideInLeft2 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(43%, 0, 0);
    transform: translate3d(43%, 0, 0);
  }
}

@-webkit-keyframes slideInLeft3 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(45%, 0, 0);
    transform: translate3d(45%, 0, 0);
  }
}

@keyframes slideInLeft3 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(45%, 0, 0);
    transform: translate3d(45%, 0, 0);
  }
}

.slideInLeft3 {
  -webkit-animation-name: slideInLeft3;
  animation-name: slideInLeft3;
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

.slideInLeft2 {
  -webkit-animation-name: slideInLeft2;
  animation-name: slideInLeft2;
}

.slideInLeftLine {
  -webkit-animation-name: slideInLeftLine;
  animation-name: slideInLeftLine;
}
#name {
    opacity:1;
    animation: slideInLeft 2s 1;
  -webkit-animation: slideInLeft 2s 1;
  -moz-animation: slideInLeft 2s 1;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}
#line {
    opacity:1;
    animation: slideInLeftLine 2s 1;
    -webkit-animation: slideInLeftLine 2s 1;
    -moz-animation: slideInLeftLine 2s 1;
      -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
     animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;

}

#occupation2 {


        animation: slideInLeft3 2s 1;
  -webkit-animation: slideInLeft3 2s 1;
  -moz-animation: slideInLeft3 2s 1;
  -webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
    animation-delay: 5s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;


}

#occupation1 {

        animation: slideInLeft2 2s 1;
  -webkit-animation: slideInLeft2 2s 1;
  -moz-animation: slideInLeft2 2s 1;
  -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-delay: 3s;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;

}

真的只是

---

#line 是我遇到的问题。这可能是因为边距功能与边缘不同，即？我知道网站上的简历也没有在页面中心显示。我将site 放在一个子目录中，以防您想查看它。

Answer 1

对于初学者来说，一个主要问题是您的 html。您有额外的匿名结束标签，即 jumbotron 中的额外结束 div 和 col-md-4 col-md-offset-7 中的随机结束 p 标签。我刚刚完全删除了 col-md-4 div

我也不知道你为什么使用margin-left。我个人会使用左边距废弃并在#jumbotron 内的项目上使用绝对定位，并确保#jumbotron 相对定位。你必须弄乱位置才能得到你想要的，但这在 IE 中有效。

HTML：

<div class="jumbotron">
    <div id="name">
        <h2>Joseph Scalzo</h2>
    </div>
    <div id="line"></div>
    <h3 id="occupation1">Performer.</h3>
    <h3 id="occupation2">Sommelier.</h3>
</div>

<main role="main">
    <!-- section -->
    <section>
        <!-- article formerly with class bigboy -->
        <article id="post-2"  class="post-2 page type-page status-publish hentry">
            <div class="container" id="hide" style="height:0; width:0;">
                <figure>
                    <img src="http://joebiz.net/blog/wp-content/uploads/2015/09/jumbotron.jpg" alt="headshot1"/><br />
                </figure>
                <div class="col-md-4 col-md-offset-7">
                    <h2>Joseph Scalzo</h2>
                    <hr id="fixedLine">
                    <h3>Performer. Sommelier.</h3>
                </div>
            </div>
            <br class="clear">
        </article>
        <!-- /article -->
    </section>
    <!-- /section -->
</main>

CSS：

.jumbotron {
    position: relative;
}

.jumbotron h2 {
    font-size:4em;
    font-family: 'Raleway', Tahoma, sans-serif;
    color:#f3e877;
}

.jumbotron h3 {
    font-family: 'Raleway', Tahoma, sans-serif;
    color:black;
}

.jumbotron #name {
    position: absolute;
    top: 100px;
    width: 375px;
}

.jumbotron #line {
    border-bottom: 1px solid #fff;
    height: 1px;
    position: absolute;
    top: 172px;
    left: -100%;
    width: 375px;
}

.jumbotron #occupation1 {
    position: absolute;
    top: 180px;
    left: -100%;
    width: 375px;
}
.jumbotron #occupation2 {
    position: absolute;
    top: 220px;
    left: -100%;
    width: 375px;
}
@-webkit-keyframes slideInLeft {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}

@keyframes slideInLeft {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}


@-webkit-keyframes slideInLeftLine {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}

@keyframes slideInLeftLine {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}

@-webkit-keyframes slideInLeft2 {
  from {
    left: -100%;
  }

  to {
    left: 68%;
  }
}


@keyframes slideInLeft2 {
  from {
    left: -100%;
  }

  to {
    left: 68%;
  }
}

@-webkit-keyframes slideInLeft3 {
  from {
    left: -100%;
  }

  to {
    left: 72%;
  }
}

@keyframes slideInLeft3 {
  from {
    left: -100%;
  }

  to {
    left: 72%;
  }
}