html – CSS3转换在Microsoft Edge(和IE)中显示不佳

概述相当新的Web开发人员.所以我在我的wordpress网站上有一个 CSS3过渡,在IE和Edge的每个浏览器中都可以正常工作.不确定该怎么做也因为我不能轻易地在我的Mac上测试它. 以下是可能影响事物的片段.第一个是从页面开始. .jumbotron #name { margin-left:-200em;}.jumbotron #line { margin-left:-80 相当新的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);    transform: translate3d(0,0);    visibility: visible;  }  to {    -webkit-transform: translate3d(42%,0);    transform: translate3d(42%,0);  }}@keyframes slIDeInleft {  from {    -webkit-transform: translate3d(0,0);  }}@-webkit-keyframes slIDeInleftline {  from {    -webkit-transform: translate3d(0,0);    visibility: visible;  }  to {    -webkit-transform: translate3d(315%,0);    transform: translate3d(315%,0);  }}@keyframes slIDeInleftline {  from {    -webkit-transform: translate3d(0,0);  }}@-webkit-keyframes slIDeInleft2 {  from {    -webkit-transform: translate3d(0,0);    visibility: visible;  }  to {    -webkit-transform: translate3d(43%,0);    transform: translate3d(43%,0);  }}@keyframes slIDeInleft2 {  from {    -webkit-transform: translate3d(0,0);  }}@-webkit-keyframes slIDeInleft3 {  from {    -webkit-transform: translate3d(0,0);    visibility: visible;  }  to {    -webkit-transform: translate3d(45%,0);    transform: translate3d(45%,0);  }}@keyframes slIDeInleft3 {  from {    -webkit-transform: translate3d(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,Opera */     animation-delay: 2s;-webkit-animation-fill-mode: forwards; /* Chrome,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,Opera */    animation-delay: 5s;-webkit-animation-fill-mode: forwards; /* Chrome,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,Opera */    animation-delay: 3s;    -webkit-animation-fill-mode: forwards; /* Chrome,Opera */    animation-fill-mode: forwards;}

真的只是#line是我遇到麻烦的那个.这可能是因为边缘功能与边缘不同,即？我知道网站上的简历也没有在页面中显示中心.我把site放在一个子目录上,你想看到它.

解决方法 对于初学者来说,一个主要问题是你的HTML.你有额外的匿名结束标签,即在jumbotron中额外关闭div和在col-md-4 col-md-offset-7中随机关闭p标签.我刚刚删除了col-md-4 div

我也不知道你为什么使用margin-left.我个人会使用左边缘废弃并在#jumbotron内的项目上使用绝对定位,并确保#jumbotron相对定位.你将不得不混乱的位置来获得你想要的东西,但这适用于IE.

HTML：

<div >    <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"  >            <div  ID="hIDe" >                <figure>                    <img src="http://joebiz.net/blog/wp-content/uploads/2015/09/jumbotron.jpg" alt="headshot1"/><br />                </figure>                <div >                    <h2>Joseph Scalzo</h2>                    <hr ID="fixedline">                    <h3>Performer. SommelIEr.</h3>                </div>            </div>            <br >        </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',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%;  }}

总结

以上是内存溢出为你收集整理的html – CSS3转换在Microsoft Edge(和IE)中显示不佳全部内容，希望文章能够帮你解决html – CSS3转换在Microsoft Edge(和IE)中显示不佳所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。