html - 将 2 个 span 对齐，以便在 Firefox 上发生动画

Question

http://jsfiddle.net/StNm8/

<section class="first">
        <div class="welcome">
        <div>
        <span class="greet">
        Hello Fellas, Want to get an Excellent Quality Service
        </span>
        <span class="bounce">?</span> 

        </div>
        <p class="showThem">
        You are at the right place !
        </p>
        </div>
        </section>

这是 CSS:-

.first {
    background-color: #d8262e;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
    text-align: center;

}
.welcome{
    display:inline-block;
    vertical-align:middle;
    width: 75%;
    /* margin:75px auto 0; */

}
.greet, .bounce{
    color: white;
      /* display:block;  */ 

      /* float:left; */  
    font: 900 4.688em/1.2em "Times",sans-serif;


}
.greet{
    float:left;
}
.bounce{
    display:block;
}
.bounce::after{
    clear: both;
} 

.showThem{
    color:white;
    display: block;
    font:900 4.688em/1.2em "Karla",sans-serif;
}

.showThem:before{
    clear:both;
}

.bounce{
      -webkit-animation: bounceAnimate 350ms linear 0s infinite alternate;
    -moz-animation: bounceAnimate 350ms linear  0s infinite alternate;
    -o-animation: bounceAnimate 350ms linear  0s infinite alternate;
    animation: bounceAnimate 350ms linear  0s infinite alternate;   
}

@-webkit-keyframes bounceAnimate{
    0%{
        -webkit-transform:translate3d(0em,0em,0em);  
    }
    50%{
         -webkit-transform: rotate(20deg);
    }
    100%{
        -webkit-transform:translate3d(0em,0em,0em);
    }
}

@keyframes bounceAnimate{
    from{
        transform: translate3d(0em,0em,0em);
    }
    50%{
        transform: rotate(20deg);
    }
    to{
        transform: translate3d(0em,0em,0em);
    } 

}

我在尝试对齐 2 个 span 时遇到问题 - greet 和 bounce 在一行中一起出现。greet span 充当一个 block ，因此 'bounce' span 中的文本出现在下一行中。我打算在同一行中看到 'greet' 和 'bounce' 的内容。

我最后尝试的是:-

我试图将“弹跳”跨度放在一个段落中，并将 class=greet 赋予该段落，如以下 jsfiddle 中所示:http://jsfiddle.net/usLnG/1/ ，但是，然后，我的动画无法在 Firefox 和 Safari 上运行

所以，我请求你指导我解决这个问题。

Answer 1

将 .bounce 更改为 {display:inline-block;} 并删除 .greet{float:left;}。使 .greet 向左浮动就是将其从正常文档流中移除。

Code JSFiddle

Example JSFiddle