css - 我应该如何处理 chrome 和 firefox 中的 css top value 差异？

Question

chrome 中的css top 或margin-top 值与firefox 和opera 有很大不同，我该怎么办？例如，在 chrome 中，当我为 (.slide_content) 放置 (top:0px;) 时，我的菜单位于正确的位置，但在 firefox 中，我必须放置 (top:-80px;)。

我该怎么办？请帮忙；提前致谢。

而且 Firebug 也没有任何错误。抱歉，我无法发布 jsfiddle 链接，因为该网站包含很多图片，我真的很想发布图片，以便您更好地理解我的意思，我试过了，但我需要 10 个声誉，但我只有 8 个，但这是我的代码: CSS:

    .tabbed_content {
        background-image:url('images/ct.png');
        width: 620px;
             height:62px;       
                 }

    .tabs {
        height: 62px;
        position: relative;
       /* top: 0px;
        left: 0px;
        width: 313px;*/
    }

    .tabs .moving_bg {
        background-color:#7F822A;
        -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
        position: absolute;
        width: 125px;
        z-index: 190;
        left: 0;
        padding-bottom: 29px;
        background-position: left bottom;
        background-repeat: no-repeat;
                     top: 3px;
                     height: 15px;
                     padding-left: 15px;
                     padding-right: 15px;
                     padding-top: 15px;
                 }

    .tabs .tab_item {
        display: block;
        float: left;
        padding: 15px;
        width: 125px;
        color: #ffffff;
        text-align: center;
        z-index: 200;
        position: relative;
        cursor: pointer;top:-130px;
    }

    .tabbed_content .slide_content {
        overflow: hidden;
        background-image: url('images/bkg.png');
        padding: 20px 0 20px 20px;
        position: relative;
        top:0px;     /*THE PROBLEM IS HERE*/

    }
    .tabbed_content
    {
     width:310px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 20px;
     margin-left:15px;
    }
    .slide_content {width:940px;height:380px;}
    .tabslider {
        width: 5000px;
    }

    .tabslider div {
        float: left;
        width: 560px;
        margin: 0px;
        padding: 0px;
        margin-right: 40px;width:900px;
    }
 a.ma:hover {text-decoration: underline;}
     a.ma{text-decoration:none; color:White;margin-left:650px;}

      #menu
        {

 position:relative;

            z-index:1;
            bottom: -50px;
            left:-175px;
            width: 1016px;
        }

#menu ul {

            z-index:9999;

            width: 866px;
            margin-left: 150px;
        }
        #menu ul li{height:400px;float:left;list-style:none;z-index:9999;


        }
        #menu li a{display:block;height:63px;z-index:9999;

font-size:20px;padding-top:90px;text-align:center;text-decoration:none;text-transform:uppercase;color:white;
            margin-left: 0px;
            }
            #menu li a:hover, #menu #menu_active a{}
.nav1 {background:url('images/menu1.gif')  center 35px  no-repeat    }
.nav2 {background:url('images/menu4.gif') center 35px no-repeat}
.nav3 {background:url('images/menu5.gif') center 35px no-repeat}
.nav4 {background:url('images/abus.gif') center 0px no-repeat}

.nav1:hover, .nav1#active {background:url('images/menu1_active.gif') center 31px no-repeat #001527}
.nav2:hover, .nav2#active {background:url('images/menu4_active.gif') center 31px no-repeat #001527}
.nav3:hover, .nav3#active {background:url('images/menu5_active.gif') center 31px no-repeat #001527}

.wrapper {overflow:hidden;float:right; height: 450px; margin-left: 63px;margin-right:0px; width: 941px;
position: relative; 
    z-index: 2;
            top: 0px;
            left: -32px;
        }

HTML:

<div style="background:url('images/toolbar2.png') no-repeat center top; height: 265px; width: 1013px;position:relative;">
    <div class="wrapper"> 
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Andalus" 
        Font-Size="XX-Large" ForeColor="White" Text="Welcome To Saray Ceram"></asp:Label>


                            <br />

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                                <div style="height: 26px;margin-top:-70px; ">
                                 <a class="ma"  href="#">Site Map</a>

                                    <asp:TextBox ID="TextBox1" runat="server" 
                                        style="Width:149px;margin-right:2px; margin-left: 650px;"></asp:TextBox>
                                    <div style="width: 27px; height: 27px; background-image:url('images/s.png') ;position:relative; bottom:29px; left: 810px;" onclick="" ></div>    




                    </div>
    <div id="menu"  > 
   <ul>
                        <li class="nav1" style="margin-left:50px;height: 154px"><a href="#" style="width:201px">&nbsp;&nbsp;Home</a></li> 

                        <li class="nav4" style="width:201px; height: 154px; margin-left: 0px;"><a href="#" style="width:200px"></a></li>

                        <li class="nav3" style="width:200px; height: 154px;margin-left: 0px;"><a href="#" style="width:200px">Contact Us</a></li>
                            <li class="nav2" style="width:201px; height: 154px;margin-left: 0px;"><a href="#" style="width:200px">Products</a></li>      

                         </ul>
                        </div>
                        </div>


    </div>
<div style=" background-image:url('images/bg_top2.jpg'); height: 600px; width: 990px; margin-left:0px;margin-right:0px"> 
    <br />
    <br />
        <div class='tabbed_content'> 
                    <div class='tabs'> 
                        <div class='moving_bg'> 
                            &nbsp;
                        </div> 
                        <span class='tab_item'> 
                            Wall Tale
                        </span> 
                        <span class='tab_item'> 
                            Floor Tale
                        </span> 

                    </div> 

                    <div class='slide_content'>                     
                        <div class='tabslider'> 
                            <div> 

                                               sth comes here
                            </div> 
                            <div  > 
                                                       and here
                            </div> 

                        </div> 

                    </div>

                    </div>

     <br /> 
     <br />

<div  style=" background-image:url('images/bg_bot.jpg');width:988px;height:105px;margin-top:400px;" >
    <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Andalus" 
        Font-Size="Large" ForeColor="White" Text="Copy Right © 2013 For Saray Ceram"></asp:Label>

    </div>

它也包含一些javascript函数，但我认为它们与我的问题无关。我真的非常感谢你的帮助，这对我来说已经成为一个大问题。也有人建议我使用 normalize.css 我将它复制并粘贴到 ma 样式表并将其包含在我的网站中，但没有任何改变。

Answer 1

通常 Firefox 和 Chrome 会/应该呈现相同的内容，除非出现严重错误。

首先通过 html validator 运行渲染的 HTML并确保没有错误。

然后尝试摆脱所有那些  ，并尝试使用 CSS reset