http://www.starkgaming.com/moba
因为我大部分已经完成了我公司的网站（新成立的yay！），我的网站只在IE和Firefox中遇到问题（我在开发过程中使用过chrome）。我的悬停菜单正在运行，但其中有一个标签系统+ iframe。选项卡系统似乎正常工作，因为您可以悬停并单击顶部的“选项卡”。我相信iframe会闪烁片刻然后消失。
在Chrome中，我的网站效果非常好。
如果我将iframe设置为固定，您可以在悬停菜单后面看到它并且标签功能正常，它只是隐藏在悬停菜单后面。
我已经尝试调整z-index以查看这是否是一个问题，那里没有运气。
我已经尝试将高度设置为固定数字而不是％而没有运气。
我还认为我的JS被处理得很奇怪但是删除这部分仍然使它操作相同所以我觉得这部分不是代码的问题部分：
$(".tab_content").show();
$(".tab_content:first").show();
$(".tab_content").addClass("active");
$(".tab_content:nth-child(2)").hide();
$(".tab_content:nth-child(3)").hide();
我去了modern.ie并解决了那里的大部分问题。
在google上查看了大量的A＆amp; Q for IE和firefox iframe问题。
自从尝试解决这些问题后，我添加了扩展的html doc类型和元字符集，甚至还有一个CSS重置版本。
我非常有信心z-index或其他东西没有被正确处理，因此iframe被放置在悬停菜单后面，但我无法确定。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/moba/css/cssreset.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="/moba/css/main.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="/moba/css/tabstyle.css" type="text/css" media="screen"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body leftmargin="0px" topmargin="50px">
<div id="socialmedia">
<div id="socialbordertop"></div>
<center>
<BR>
<A TITLE="E-Mail" HREF="mailto:info@starkgaming.com"><IMG SRC="/moba/images/social-email-icon.png"></a>
<A TITLE="Twitter" HREF="http://www.twitter.com/starkgaminginc"><IMG SRC="/moba/images/social-twitter-icon.png"></a>
<A TITLE="Facebook" HREF="https://www.facebook.com/pages/Stark-Gaming-Inc/867749979955567"><IMG SRC="/moba/images/social-facebook-icon.png"></a>
<A TITLE="Glassdoor" HREF="http://www.glassdoor.com/starkgaminginc"><IMG SRC="/moba/images/social-glassdoor-icon.png"></a>
<A TITLE="AngelList" HREF="http://www.angel.co/stark-gaming-inc"><IMG SRC="/moba/images/social-angel-icon.png"></a>
<A TITLE="LinkedIn" HREF="https://www.linkedin.com/company/stark-gaming-incorporated"><IMG SRC="/moba/images/social-linkedin-icon.png"></a>
<BR>
</center>
</div>
<div id="mainbgimage"></div>
<div class="content"><!-- Menu Start -->
<ul id="sdt_menu" class="sdt_menu">
<li><!-- About Me Section Start -->
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Who We Are</span>
<span class="sdt_descr">Innovative Gaming</span>
</span>
<div class="sdt_box"><!-- Drop Down Menu Box Start -->
<div id="bordertop"></div>
<div id="borderbottom"></div>
<div id="aboutusbg"></div>
<div id="container"><!-- About SG Tab System Start -->
<ul class="tabs"><!-- Tab Titles Start -->
<li rel="play"></li>
<li rel="analyze"></li>
<li rel="create"></li>
</ul><!-- Tab Titles End -->
<div class="tab_container"><!-- Tab Container Start -->
<div id="play" class="tab_content"><!-- Tab1 Start -->
<iframe ID="iframe" SCROLLING="no" FRAMEBORDER="0" src="/moba/html/play-tab.html"></iframe>
</div><!-- Tab1 End -->
<div id="analyze" class="tab_content"><!-- Tab2 Start -->
<iframe ID="iframe" SCROLLING="no" FRAMEBORDER="0" src="/moba/html/analyze-tab.html"></iframe>
</div><!-- Tab2 End -->
<div id="create" class="tab_content"><!-- Tab3 Start -->
<iframe ID="iframe" SCROLLING="no" FRAMEBORDER="0" src="/moba/html/create-tab.html"></iframe>
</div><!-- Tab3 End -->
</div><!-- Tab Container End -->
</div><!-- About SG Tab System End -->
</div><!-- Drop Down Menu Box End -->
</li><!-- About Me Section End -->
<li><!-- Career Start -->
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Career</span>
<span class="sdt_descr">Join Stark Gaming</span>
</span>
<div class="sdt_box">
<div id="bordertop"></div>
<div id="borderbottom"></div>
<div id="container"><!-- About SG Tab System Start -->
<ul class="tabs"><!-- Tab Titles Start -->
<li rel="career"></li>
</ul><!-- Tab Titles End -->
<div class="tab_container"><!-- Tab Container Start -->
<div id="career" class="tab_content"><!-- Tab1 Start -->
<iframe ID="iframe" SCROLLING="no" FRAMEBORDER="0" src="/moba/html/career-tab.html"></iframe>
</div><!-- Tab1 End -->
</div><!-- Tab Container End -->
</div><!-- About SG Tab System End -->
</div>
</li><!-- Career Start End -->
<li><!-- Dev Blog Start -->
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Dev Blog</span>
<span class="sdt_descr">Progress Updates</span>
</span>
<div class="sdt_box">
<div id="bordertop"></div>
<div id="borderbottom"></div>
<div id="container"><!-- Dev Blog Tab System Start -->
<ul class="tabs"><!-- Tab Titles Start -->
<li rel="devblog"></li>
</ul><!-- Tab Titles End -->
<div class="tab_container"><!-- Tab Container Start -->
<div id="devblog" class="tab_content"><!-- Tab1 Start -->
<iframe ID="iframe" SCROLLING="no" FRAMEBORDER="0" src="/moba/html/devblog-tab.html"></iframe>
</div><!-- Tab1 End -->
</div><!-- Tab Container End -->
</div><!-- Dev Blog System End -->
</div>
</li><!-- Dev Blog End -->
<li><!-- Donate Start -->
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Donate</span>
<span class="sdt_descr">Help us</span>
</span>
<div class="sdt_box">
<div id="bordertop"></div>
<div id="borderbottom"></div>
<div id="container"><!-- Donate Tab System Start -->
<ul class="tabs"><!-- Tab Titles Start -->
<li rel="donate"></li>
</ul><!-- Tab Titles End -->
<div class="tab_container"><!-- Tab Container Start -->
<div id="donate" class="tab_content"><!-- Tab1 Start -->
<iframe ID="iframe" SCROLLING="no" FRAMEBORDER="0" src="/moba/html/donate-tab.html"></iframe>
</div><!-- Tab1 End -->
</div><!-- Tab Container End -->
</div><!-- Donate System End -->
</div>
</li><!-- Donate End -->
</ul>
</div><!-- Menu End -->
<!-- The JavaScript -->
<script type="text/javascript" src="/moba/js/jquery.easing.1.3.js"> </script>
<script type="text/javascript">
$('#sdt_menu > li').bind('mouseenter',function() {
$(".tab_content").show();
$(".tab_content:first").show();
$(".tab_content").addClass("active");
$(".tab_content:nth-child(2)").hide();
$(".tab_content:nth-child(3)").hide();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn(250);
});
});
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'190px',
'height':'85px',
'left':'0px',
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'-43px','left':'0px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},0,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
$sub_menu.fadeIn(250);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.fadeOut(500);9
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'0px'},500);
});
});
</script>
</body>
</html>
CSS（主页）
body {
background-image: url(http://www.starkgaming.com/moba/images/bg/rotate.php);
overflow-y:hidden;
overflow-x:hidden;
background-color: #FFF;
background-repeat: no-repeat;
background-size: cover;
}
#socialmedia{
background-image: url(http://www.starkgaming.com/moba/images/bgblacktransparent.png);
background-repeat: repeat;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top:30px;
left: 0;
right: 0;
height: 70px;
Width: 100%;
position: fixed;
overflow: visible;
z-index: 0;
}
#iframe{
background: transparent;
background-repeat: repeat;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0px;
right: 0px;
height: 400px;
Width: 100%;
position: relative;
overflow: visible;
z-index: 5000;
}
#socialbordertop{
background-color: #11b0b2;
background-repeat: repeat;
left: 0px;
top: 0px;
height: 3px;
Width: 100%;
position: absolute;
overflow: visible;
z-index: 2000;
}
#mainbgimage{
background-image: url(http://www.starkgaming.com/moba/images/mainbgimage.png);
background-repeat: no-repeat;
position: absolute;
width: 665px;
height: 150px;
top: 350px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
overflow: visible;
z-index: -2000;
}
#bordertop{
background-color: #11b0b2;
background-repeat: repeat;
left: 0px;
top: 0px;
height: 3px;
Width: 100%;
position: absolute;
overflow: visible;
z-index: 2000;
}
#borderbottom{
background-color: #11b0b2;
background-repeat: repeat;
left: 0px;
top: 397px;
height: 3px;
Width: 100%;
position: absolute;
overflow: visible;
z-index: 2000;
}
ul.sdt_menu{
margin-top: 500px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:12px;
width:760px;
color:#FFF;
text-align: center;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:190px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:190px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:0px;
left:0px;
width:190px;
height:40px;
z-index:15;
background-image: url(http://www.starkgaming.com/moba/images/wrapbg.png);
background-repeat: no-repeat;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:190px;
height:0px;
left:0px;
z-index: 10;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
color:#FFFFFF;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:0px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color: #13b6b8;
font-size:15px;
float:center;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#000;
float:left;
clear:both;
width:190px; /*For dumbass IE7*/
font-size:15px;
letter-spacing:1px;
z-index: 15;
}
ul.sdt_menu li div.sdt_box{
position:fixed;
display:block;
height:400px;
overflow:hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 100px;
display:none;
background-color: #000;
color:#FFFFFF;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:0px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:0px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
CSS（TABS）
#play.tab_content {
background-image: url(http://www.starkgaming.com/moba/images/bgtest1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -500px;
left: 0px;
top: 0px;
height: 100%;
Width: 100%;
position: absolute;
overflow: visible;
z-index: -1;
}
#analyze.tab_content{
background-image: url(http://www.starkgaming.com/moba/images/bgtest2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -50px;
left: 0px;
top: 0px;
height: 100%;
Width: 100%;
position: absolute;
overflow: visible;
z-index: -1;
}
#create.tab_content{
background-image: url(http://www.starkgaming.com/moba/images/bgtest3.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -500px;
left: 0px;
top: 0px;
height: 100%;
Width: 100%;
position: absolute;
overflow: visible;
z-index: -1;
}
#career.tab_content{
background-image: url(http://www.starkgaming.com/moba/images/bgtest5.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -500px;
left: 0px;
top: 0px;
height: 100%;
Width: 100%;
position: absolute;
overflow: visible;
z-index: -1;
}
#devblog.tab_content{
background-image: url(http://www.starkgaming.com/moba/images/devblogbg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -50px;
left: 0px;
top: 0px;
height: 100%;
Width: 100%;
position: absolute;
overflow: visible;
z-index: -1;
}
#donate.tab_content{
background-image: url(http://www.starkgaming.com/moba/images/bgtest4.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -250px;
left: 0px;
top: 0px;
height: 100%;
Width: 100%;
position: absolute;
overflow: visible;
z-index: -1;
}
#tabboxblack{
background-image: url(http://www.starkgaming.com/moba/images/bgblacktransparent50.png);
background-repeat: repeat;
border-radius: 25px;
-webkit-border-radius: 25px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 35px;
left: 0px;
right: 0px;
height: 70%;
Width: 90%;
position: relative;
overflow: visible;
z-index: 5010;
}
#tabboxwhite{
background-image: url(http://www.starkgaming.com/moba/images/bgwhitetransparent10.png);
background-repeat: repeat;
border-radius: 25px;
-webkit-border-radius: 25px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0px;
right: 0px;
height: 90%;
Width: 90%;
position: relative;
overflow: visible;
z-index: 5010;
}
#tabboxtransparent{
background: transparent;
background-repeat: repeat;
border-radius: 25px;
-webkit-border-radius: 25px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 35px;
left: 0px;
right: 0px;
height: 70%;
Width: 90%;
position: relative;
overflow: visible;
z-index: 5010;
}
#tabtitle {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: -75px;
left: 0px;
right: 0px;
position: absolute;
}
#tabarrow {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: -25px;
left: 0px;
right: 0px;
position: absolute;
}
ul.tabs {
position:relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top:0px;
left: 0px;
right: 0px;
height: 400px;
Width: 100%;
padding: 0px;
list-style: none;
background-color: transparent;
color: #FFF;
z-index: 5001;
}
ul.tabs li {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0px;
right: 0px;
height: 20%;
cursor: pointer;
width: 33.33%;
font-weight: bold;
font-size: 40;
font-family: "Century Schoolbook";
background-color: transparent;
z-index: 5002;
}
ul.tabs li:hover {
color: #11b0b2;
background-image: url(http://www.starkgaming.com/moba/images/bgwhitetransparent10.png);
background-repeat: repeat;
}
ul.tabs li.active{
color: #11b0b2;
background-color: transparent;
border-bottom: 0px solid #FFFFFF;
}
.tab_container {
border-top: none;
width: 100%;
height: 400px;
background-color: transparent;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0px;
right: 0px;
z-index: 5003;
}
.tab_content {
position:absolute;
padding: 0px;
font-size: 1.2em;
background-color: transparent;
width: 100%;
height: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
right:0px;
left:0px;
top: 20%;
z-index: 5004;
}
#container {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0px;
right: 0px;
height: 400px;
Width: 100%;
background-color: transparent;
border: 1px;
z-index: 5005;
}
iframe网页的次要CSS：
body {
overflow-y:hidden;
overflow-x:hidden;
background-repeat: repeat;
background-color: transparent;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:12px;
color: #FFF;
}
答案 0 :(得分：0)
我最终扭转了布局的结构。
我在标签系统中取代了iframe，而是在我的iframe中制作了标签系统。
这使它工作，在Firefox中正确的表定位需要一些小的修复。现在使用IE，Firefox，Safari和Chrome。
要使用表格在firefox中正确定位元素，我这样做了：
<style type="text/css">
@-moz-document url-prefix() {
#firefox {
vertical-align:top;
padding-top: 60px;
}
}
</style>
至少让它工作至今，需要一些工作才能管理它，但总体来说它必须要做......现在。