这里是相当新的 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 是我遇到的麻烦。这可能是因为边缘和 ie 的边距功能不同?我知道网站上的简历也没有在页面中心显示。我把 site如果您想查看它,请在子目录上。
最佳答案
对于初学者来说,一个主要问题是您的 html。你有额外的匿名关闭标签,即 jumbotron 中的额外关闭 div 和 col-md-4 col-md-offset-7 中的随机关闭 p 标签。我刚刚完全删除了 col-md-4 div
我也不知道你为什么要使用 margin-left。我个人会使用 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%;
}
}
关于html - CSS3 转换在 Microsoft Edge(和 IE)中显示不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33267072/