html - 在Firefox和谷歌浏览器中定位不匹配

第一张图片是在google 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

更新：固定，将＃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

最佳答案

看起来＃video-content元素在Firefox中可能有边距。应该在绝对定位元素之前将其删除。

在CSS开头尝试以下操作：

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

关于html - 在Firefox和谷歌浏览器中定位不匹配，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21242859/