图像对齐chrome＆amp;火狐但不是野生动物园

Question

我遇到了对齐图像的问题。我不得不设置margin-top：-152px以使其在Chrome＆amp; Firefox浏览器。然而，在Safari中，它在容器上方溢出了很多。有没有办法解决这个问题，以便它在所有浏览器中显示与容器顶部齐平对齐。

网站的其余部分正确显示。问题只出在（.footer .right）＆amp; （.footer .right p）。

CSS

footer {
    width: 100%;
    background-color: #212119;
}

.footer {
    margin: 0 auto;
    width: 960px;
    height: 285px;
    margin-bottom: 10px;
    color: #474741;
}

.footer .left {
    margin-top: 20px;
    margin-left: 10px;
    float: left;
    width: 33%;
    text-align: left;
}

.footer .left img {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    float: left;
    height: 110px;
    width: 113px;
}

.footer .left h6 {
    color: #474741;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    font-family: arial, sans-serif;
}

.footer .left p {
    margin-top: 40px;
    font-size: 14px;
}

.footer .left p:last-child {
    margin-top: -15px;
    font-family: arial, sans-serif;
}

.footer .middle {
    text-align: left;
    margin-top: 40px;
    float: left;
    width: 33%;
}

.footer .middle p {
    margin-top: 0px;
}

.footer .right {
    text-align: center;
    float: right;
    width: 33%;
    display: block;

}

.footer .right p {
    margin-top: -152px;
}

HTML

<footer>
    <div class="footer">
                    <div class="left">
                        <img src="#" alt="">
                        <h6></h6>
                        <p></p>
                    </div>
                    <div class="middle">
                        <p><a href="#"><img src="#" alt=""></a></p>
                    </div>
                    <div class="right">
                        <p><a href="#"><img src="#" alt=""></a></p>
                    </div>
                </div>
            </footer><!--! end of #footer -->

感谢您的帮助！