css - 单击按钮时防止抖动 div

Question

我在按钮上添加了一个底边，当单击按钮时，底边被移除，按钮向下移动 3px 以创建按下效果。但是当单击按钮时，事件 div 下面的 div 也会上下移动。

这张截图可以把事情说清楚。

HTML

<div id="contactus">
        <a class="dropcontact" href="javascript:void(0)">Contact Us</a>
        <div id="contact-container" class="body">
            <ul>
                <li><input type="text" placeholder="Name" /></li>
                <li><input type="text" placeholder="Email" /></li>
                <li><textarea placeholder="Message"></textarea></li>
                <li><input type="submit" value="send"></li>
            </ul>
        </div>
    </div>
    <footer>
        <div id="footer-container" class="body">
            <span>&copy; All Rights Reserved 2014. Design By Mohit Chawla.</span>
            <div class="social">
                <a href="javascript:void(0)"><img src="images/social/facebook-3-128.png" alt=""></a>
                <a href="javascript:void(0)"><img src="images/social/pinterest-4-128.png" alt=""></a>
                <a href="javascript:void(0)"><img src="images/social/twitter-4-128.png" alt=""></a>
            </div> 
        </div>
    </footer>

按钮的

CSS

#contact-container input[type="submit"]{
    border: none;
    background-color: #f4f4f4;
    color: #ffb851;
    padding: 10px;
    font-size: 16px;font-size: 1.6rem;
    border-radius: 5px;
    border-bottom: 3px solid #e5e5e5;
    cursor: pointer;
}
#contact-container input[type="submit"]:active{
    position: relative;
    top: 3px;
    border-bottom: 0px;
}

Answer 1

不要改变边框宽度，改变边框颜色:

#contact-container input[type="submit"]:active{
    position: relative;
    top: 3px;
    border-bottom: 3px solid transparent;
}

这样大小保持不变，不会影响布局/大小调整。