宽度转换的 CSS 怪异

Question

制作了一个网络作品集。我的名字周围有联系方式。文本的初始宽度为 0，当鼠标悬停时，图标会使用“transition”属性展开。左边的图标可以正常工作，但右边的图标有一个奇怪的过渡，尤其是手机。

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 与 2。是<a> 的下划线（注意空格）。