单击按钮时防止抖动的div

Question

我在按钮上添加了一个边框底部，当单击按钮时，将删除border-bottom并将按钮向下移动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;
}

这样，尺寸保持不变，不会影响布局/尺寸。