Html firefox和google chrome中的定位不匹配

Html firefox和google chrome中的定位不匹配,html,css,position,less,css-position,Html,Css,Position,Less,Css Position,第一张图片是谷歌chrome中的外观(正确),第二张图片是firefox中的外观(错误) 有什么提示可以帮助我在firefox中解决这个问题吗?多谢各位 <div class="container"> <div id="top"> <div class="top-bar"> <div id="logo"></div> <div class="top-bar-r

第一张图片是谷歌chrome中的外观(正确),第二张图片是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

看起来#视频内容元素在Firefox中可能有空白。在绝对定位元素之前,应将其移除

在CSS的开头尝试以下操作:

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

这没有做任何事情,它必须在父div中,我将更新我的问题并包括所有这些。让它工作。我将#视频内容位置设置为相对,将其子元素位置设置为绝对,并根据需要调整顶部/右侧/左侧/底部。
* { margin: 0; padding: 0px; }