iFrame 适用于 Chrome，但不适用于 IE/Firexx

【问题标题】：iFrame works in Chrome but not IE/FirefxxiFrame 适用于 Chrome，但不适用于 IE/Firexx
【发布时间】：2015-01-21 21:20:45
【问题描述】：

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;
}

【问题讨论】：

    标签： javascript jquery css iframe


    【解决方案1】：

    我最终颠倒了我的布局结构。

    我在 iframe 中制作了标签系统，而不是标签系统中的 iframe。

    这使它工作，需要一些小的修复才能在 Firefox 中正确定位表格。现在可以使用 IE、Firefox、Safari 和 Chrome。

    为了在 Firefox 中使用表格正确定位元素，我这样做了：

        <style type="text/css">
    @-moz-document url-prefix() {
    #firefox {
    vertical-align:top;
    padding-top: 60px;

    }
    }
    </style>

    让它至少现在可以工作，需要一些工作来管理它，但总的来说它必须做......现在。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2014-01-06
      • 2014-05-17
      • 1970-01-01
      • 1970-01-01
      • 2012-01-27
      • 2012-02-14
      • 2014-07-07
      • 2013-07-09
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode