http://www.starkgaming.com/moba
因为我已经完成了我公司网站(新成立的耶!)的大部分工作，所以我的网站只在 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 上查看了大量关于 IE 和 firefox iframe 问题的 A&Q。
自从尝试解决这些问题后，我添加了扩展的 html 文档类型和元字符集，甚至还添加了 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;
}
最佳答案
我最终颠倒了我的布局结构。
我在 iframe 中制作了标签系统，而不是标签系统中的 iframe。
这使它工作，需要一些小的修复才能在 firefox 中正确定位表格。现在使用 IE、Firefox、Safari 和 Chrome。
为了在 firefox 中使用表格正确定位元素，我这样做了:
<style type="text/css">
@-moz-document url-prefix() {
#firefox {
vertical-align:top;
padding-top: 60px;
}
}
</style>
至少现在让它工作，需要做一些工作来管理它，但总的来说它必须做......现在。
关于javascript - iFrame 适用于 Chrome 但不适用于 IE/Firefxx，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28077047/