【发布时间】：2013-07-29 05:11:01
【问题描述】：
chrome 中的 css top 或 margin-top 值与 firefox 和 opera 有很大不同，我该怎么办？例如，在 Chrome 中，当我为 (.slide_content) 放置 (top:0px;) 时，我的菜单位于正确的位置，但在 Firefox 中我必须放置 (top:-80px;)。
我该怎么办？请帮忙；提前谢谢。
而且萤火虫也没有任何错误。抱歉，我无法发布 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 />
<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 />
<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"> 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'>
</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 />
<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 样式表中，并将其包含在我的网站中，但没有任何改变。
【问题讨论】：
-
现在你的声望超过了 10 个。 :)
-
非常感谢我的朋友。
标签： css firefox cross-browser css-position