在firefox和谷歌浏览器中定位不匹配

Question

第一张图片是它在谷歌浏览器中的外观（正确），第二张图片是它在Firefox中的外观（错误）。

任何有助于我在Firefox中解决此问题的提示？谢谢。

<div class="container">
    <div id="top">
        <div class="top-bar">
            <div id="logo"></div>
            <div class="top-bar-red-stripe">
                <ul class="top-bar-social-btns">
                    <li><a href="" class="top-bar-twitter-btn">facebook</a></li>
                    <li><a href="" class="top-bar-facebook-btn">facebook</a></li>
                </ul>
            </div>
        </div><!-- /.top-bar -->

        <div id="top-left-content">
            <h3>This is a title</h3>
            <div class="race-drivers"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>

        <div id="video-content">
            <h3>LATEST WEBISODE</h3>
            <div class="video-file"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>

            <a href="#" class="all-webisodes-btn">View all webisodes</a>
        </div>

        <div id="vote-content">
            <h3>VOTE FOR WHAT HAPPENS NEXT</h3>          

            <div class="vote-bar">
                <a href="#" class="vote-enhancements">Enhancements</a>
                <a href="#" class="vote-compass">Compass</a>
                <a href="#" class="vote-activities">Activities</a>
                <a href="#" class="vote-btn">Vote</a>
            </div>
        </div><!-- #vote-content -->
    </div><!-- /#top -->
</div><!-- /.container -->

.container {
    width: 960px;
    margin: 0 auto;
    border: @outside-border;

    #top {
        background: #000 url('../images/top_background.jpg') no-repeat;
        height: 505px;

        #video-content {
            position: absolute;
            margin: 0;
            padding: 0;
            top: 85px;
            right: 239px;

            border: 1px solid red;
            width: 500px;


            h3 {
                margin: 0;
            }

            p {
                margin: 0;
            }

            .video-file {
                position: absolute;
                background: #ccc;
                border: 2px solid #3592cd;
                width: 400px;
                height: 240px;
            }// .video-file

            a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
                display: inline-block;
                overflow: hidden;
                text-indent: -9999px;
                background: transparent url('../images/all-webisodes-btn.png') no-repeat;
                width: 88px;
                height: 65px;
                position: absolute;
                top: 107px;
                right: -2px;
            }// .all-webisodes-btn
        }// #video-content

        #vote-content {
            width: 442px;
            position: absolute;
            top: 328px;
            right: -523px;
            position: relative;

            h3 {
                margin: 0 0 0 15px;
            }

            .vote-bar {
                position: relative;
                //border:1px solid red;
                background: transparent url('../images/vote-bar-bg.png') no-repeat;
                width: 438px;
                height: 73px;
                position: relative;

                a:link, a:visited {
                    display: inline-block;
                    overflow: hidden;
                    text-indent: -9999px;
                }

                a.vote-enhancements:link, a.vote-enhancements:visited {
                    background: transparent url('../images/enhancements_btn.png') no-repeat;
                    width: 86px;
                    height: 42px;
                    position: relative;
                    top: 10px;
                    left: 170px;
                }

                a.vote-compass:link, a.vote-compass:visited {
                    background: transparent url('../images/compass_btn.png') no-repeat;
                    width: 52px;
                    height: 42px;
                    position: relative;
                    top: 10px;
                    left: 190px;
                }

                a.vote-activities:link, a.vote-activities:visited {
                    background: transparent url('../images/activities_btn.png') no-repeat;
                    width: 56px;
                    height: 42px;
                    position: relative;
                    top: 10px;
                    left: 210px;
                }

                a.vote-btn:link, a.vote-btn:visited {
                    background: transparent url('../images/vote-now-btn.png') no-repeat;
                    width: 141px;
                    height: 34px;
                    position: relative;
                    top: 47px;
                    left: 73px;
                }
            }// .vote-bar

        }// .vote-content

    }// #top
}// .container

更新：修复，为#video-content设置相对位置，并为子元素设置绝对位置

#video-content {
    width: 500px;
    position: relative;
    top: 10px;
    left: 459px;

    h3 {
        margin: 0;
    }

    .video-file {
        position: absolute;
        background: #ccc;
        border: 2px solid #3592cd;
        width: 400px;
        height: 240px;
    }// .video-file

    a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
        display: inline-block;
        overflow: hidden;
        text-indent: -9999px;
        background: transparent url('../images/all-webisodes-btn.png') no-repeat;
        width: 88px;
        height: 65px;
        position: absolute;
        top: 100px;
        right: -3px;


    }// .all-webisodes-btn
}// #video-content

Answer 1

看起来#video-content元素可能在Firefox中有余量。应该在绝对定位元素之前删除它。

在CSS的开头尝试：

* { margin: 0; padding: 0px; }