html样式在ie显示不全,html – CSS3转换在Microsoft Edge(和IE)中显示不佳

相当新的Web开发人员.所以我在我的wordpress网站上有一个

CSS3过渡,在IE和Edge的每个浏览器中都可以正常工作.不确定该怎么做也因为我不能轻易地在我的Mac上测试它.

以下是可能影响事物的片段.第一个是从页面开始.

.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放在一个子目录上,你想看到它.