Chrome の css top または margin-top の値が、firefox と Opera で大きく異なります。どうすればよいですか? たとえば、クロムで (top:0px;) を (.slide_content) に配置すると、メニューは適切な場所に表示されますが、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 />
<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 を使用するように勧められた人もいました。それをコピーしてスタイルシートに貼り付け、Web サイトに含めましたが、何も変わりませんでした。