Question

有人能告诉我为什么这个怪异的代码不能在Firefox上工作但是在chrome和safari上工作吗？有任何想法吗？我尝试了所有我知道的东西，但我不希望你。

码

HTML

<div id="container_intro">  
  <span class="link1"><span class="bold">about</span>me</span>
  <span class="link2">my<span class="bold">works</span></span>
  <div class="logo_intro">
  <img class="rotation" src="images/symbol_bg.png">
  <img class="transparent" src="images/symbol_transparent.png"> 
  </div>
</div>

CSS

body {
margin:0px auto;
padding: 0px;
font-family: 'Open Sans', sans-serif;
background:#FFF;
}

.link1 {
position: absolute;
top:42%;
left:20%;
display: block;
font-family: 'Josefin Sans', sans-serif;
font-size:64px;
font-weight: 100;
color:#dc0000;
z-index: 50;
}

.link2 {
position: absolute;
top:42%;
right:20%;
display: block;
font-family: 'Josefin Sans', sans-serif;
font-size:64px;
font-weight: 100;
color:#dc0000;
z-index: 50;
}

.demi {
font-weight: 400;
}
.bold {
font-weight: 700;
}

img {
width:100%;
}

#container_intro {
margin: 0px auto;
height:100vh;
min-height: 100%;
overflow: hidden;
}

.logo_intro {
margin:0px auto;
overflow: hidden;
background: #fff;
opacity: 0.9;
width: 35%;
z-index: 50;
}

.black {
margin:0px auto;
padding:0px;
background: #000;
width:100%;
height:2400px;
}

/* ======================================================================== */
/* ! Animations
/* ======================================================================== */

.transparent {
z-index: 50;
border: 130px solid #ffffff;
overflow: hidden;
margin-left:-130px;
margin-top:-130px;

}
.rotation {
position: absolute;
width: 35%;
margin:0px auto;
margin-left:-10px;
margin-top:-10px;
overflow: hidden;
z-index: -1;
-webkit-animation-name: rotate;
-webkit-animation-duration:30s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration:30s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
animation-name: rotate;
animation-duration:30s;
animation-iteration-count:infinite;
animation-timing-function:linear;
background-position:center;
}

预览：www.nevisu.co.uk

Answer 1

有趣的错误，溢出是愚蠢的行为。试试这个：

@-moz-document url-prefix() {
.logo_intro {
    overflow: visible;
}

如果在firefox中只应该更改overflow的值。

Answer 2

将position: relative添加到.logo-intro，将width: 100%添加到.rotation。见下文：

.logo_intro {
    position: relative; /* Added */
    margin: 0px auto;
    overflow: hidden;
    background: #fff;
    opacity: 0.9;
    width: 35%;
}

.rotation {
    position: absolute;
    width: 100%; /* Changed  */
    margin: -10px auto 0px -10px;
    overflow: hidden;
    z-index: -1;
    animation-name: rotate;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-position: center center;
}

CSS边框不适用于Firefox

2 个答案: