css - CSS 图像过渡破坏了内联显示

Question

ul, li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px 20px;
}

#footer {
margin: 10px auto 0px auto;
text-align: center;
width: 50%;
clear: both;
}

#footer .social {
margin: 0px auto 0px auto;
padding-top: 60px;
}

#footer img {
border-radius: 5px;
box-shadow: 0 8px 6px -6px black;
align: bottom;
width: 50px;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}

#footer img:hover {
width:60px;
}

---

    <div id="footer">
    <div class="social">
        <ul>
            <li><a href="http://facebook.com/dwpirat"><img src="facebook_logo.png"></a></li>
            <li><a href="http://twitter.com/#dwpirat"><img src="twitter_logo.png"></a></li>
        </ul>
    </div>
</div>

http://jsfiddle.net/DvVug/2/

为什么图像以错误的方向膨胀导致相邻图像变低？我只是想让它向上扩展。

先感谢您。

Answer 1

只需添加vertical-align: top到图像。这将导致它向下而不是向上生长，这似乎是您想要的（您也可以尝试vertical-align: middle）。

http://jsfiddle.net/ExplosionPIlls/DvVug/3/

Answer 2

http://jsfiddle.net/DvVug/4/

CSS变换比例和变换原点是你要找的

这是你可以解决的最快的解决方案，但没有意义真的希望这有帮助

#footer img {
border-radius: 5px;
box-shadow: 0 8px 6px -6px black;
align: bottom;
width: 50px;
transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; /* Opera */
transform-origin:50% 100%;
-ms-transform-origin:50% 100%; /* IE 9 */
-webkit-transform-origin:50% 100%; /* Safari and Chrome */
-moz-transform-origin:50% 100%; /* Firefox */
-o-transform-origin:50% 100%; /* Opera */
}

#footer img:hover {
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2); /* IE 9 */
-webkit-transform: scale(1.2,1.2); /* Safari and Chrome */
-o-transform: scale(1.2,1.2); /* Opera */
-moz-transform: scale(1.2,1.2); /* Firefox */
}