CSS宽度过渡的怪异

Question

制作了一个网络组合.我的名字周围有联系方式.当使用"transition"属性悬停图标时,文本的初始宽度为0.左边的图标工作正常,但右边的图标有一个奇怪的过渡,尤其是手机.

http://jsfiddle.net/4y9eW/

<div class="contactbox left">
    <a href="https://twitter.com/D4NiMG" class="contactchild" id="contacttwittertext">
        <span class="contacticon-twitter"></span>
        <span class="contacttext">@D4NiMG</span>
    </a>
    <a href="https://plus.google.com/+DaniMu%C3%B1ozGuardiola" class="contactchild" id="contactgoogleplustext">
        <span class="contacticon-google-plus"></span>
        <span class="contacttext">+DaniMu&ntilde;ozGuardiola</span>
    </a>
</div>
<span id="titlespan">Dani Guardiola</span>
<div class="contactbox right">
    <a href="mailto:d4nimg@gmail.com" class="contactchild" id="contactemailtext">
        <span class="contacticon-email"></span>
        <span class="contacttext">d4nimg@gmail.com</span>
    </a>
    <a href="tel:+34607017025" class="contactchild" id="contactphonetext">
        <span class="contacticon-phone"></span>
        <span class="contacttext">+34 607 01 70 25</span>
    </a>
</div>

CSS:

.contacttext {
    display: none;
    white-space: nowrap;
}
.contactchild:hover .contacttext {
    display: inline-block;
}
.contactchild  {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 32px;
    color: white;
    transition: width 0.3s;
}
#contacttwittertext:hover {
    transition: width 0.3s;
    width: 107px;
    color: #00aced;
}
#contactgoogleplustext:hover {
    transition: width 0.3s;
    width: 189px;
    color: #D34836;
}
#contactemailtext:hover {
    transition: width 0.3s;
    width: 175px;
    color: #8036d3;
}
#contactphonetext:hover {
    transition: width 0.3s;
    width: 154px;
    color: #6fd336;
}

Answer 1

手机的问题在于文字包装.组

.contactchild { white-space: nowrap }

奇怪的重叠是由于你滥用职位造成的:绝对的.摆脱它.用边距移动它,父母强迫nowrap.

奇怪的下划线与HTML中的空格有关.见1 vs 2.它<a>是下划线(注意空格).