iframe滚动条在Mac上的Chrome中消失

Question

我有一个完整的页面iframe，但是在chrome中，滚动条最初加载然后消失，房间就在那里，你可以使用它，但它不可见。在游戏中使用完美的游戏，在PC上使用firefox和chrome，但是在Mac上你可以看到滚动条的井，但是栏本身就不见了。

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#me-content{
    height:100%;
    width:100%;
    position:relative;
    border:1px solid #ff9900;
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

<div id="me-branding-bar">

</div>

<div id="me-content">
    <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>

http://jsfiddle.net/RYwty/

Answer 1

为什么在Mac上使用Chrome时，滚动条会在<iframe>中消失？

当您的<iframe>包含来自外部网站的整个页面时，这是一个非常广泛的问题。让我们分解几步。

^{以下示例假定您在Mac上使用Chrome。}

进行简单的测试

创建一个非常简单的HTML页面，将其放在<iframe>中，然后在Mac上的Chrome中查看它（DEMO）。

滚动条不会消失。一切似乎都很好。因此，外部网站上的某些内容很可能会导致问题。

调试外部站点

症状是滚动条在消失之前实际显示的时间很短，但页面仍然可滚动。也许JavaScript导致了这个问题？我们禁用JavaScript和try it out。

事实证明，禁用JavaScript时滚动条不会消失。所以JavaScript加载的东西会导致问题。进一步调试显示flash对象是罪魁祸首。

进行另一次测试

创建两个简单的HTML测试页面并向其中一个添加flash对象。将它们放入不同的<iframe>和compare them以查看差异。

<object type="application/x-shockwave-flash"></object>

事实证明，带有flash对象的那个没有可见的滚动条。

结论

滚动条不会在正常<iframe>中消失，而是在闪烁对象中消失。它可能是一个bug，或者它可能是故意的肮脏黑客。许多Flash广告和视频都在<iframe>中提供，并且其中包含滚动条并不漂亮。

但重点是，您在<iframe>中提供外部内容，这些是您无法控制的内容。

<iframe src="<?php echo $url;?>"></iframe>

也许你可以尽力解决一两个问题，但外部页面中有很多事情可以解决问题。人们甚至可以通过JavaScript和HTTP标头获得一些帮助prevent their sites from being placed in an <iframe>。只要页面加载，您应该对此感到高兴。不要过多关注消失的滚动条等细节。当页面实际上不可滚动时，只会担心它。你正在谈论在Mac上滚动。大多数情况下，这是通过手势而非滚动条完成的。

如果您想要更多地控制外部内容，请考虑使用cURL和modifying the contents with HTML parsers在服务器端加载。

Answer 2

以下代码似乎解决了Mac上Chrome中的iframe滚动条问题。

此修补程序与Mac，PC上的Firefox，Safari和Opera跨浏览器兼容。

jsfiddle

HTML：

<div id="me-branding-bar"></div>

    <div id="me-content">
        <iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
    </div>

CSS：

body,html{height:100%;overflow:hidden;}
        #me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
        #me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
        #me-content iframe{border:1px solid #000;}

.iframeclass::-webkit-scrollbar {
    width:10px;
}

.iframeclass::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.02);
}

.iframeclass::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}

Answer 3

*{
   margin:0; 
   padding:0;
}
html, body{
   height:100%; 
   width:100%;
}
#me-branding-bar{
   width:100%; 
   height:10%; 
   position:relative; 
   background-color:#ff9900; 
   display:block;
}
#me-content{
   display:block; 
   height:90%; 
   width:100%; 
   position:relative; 
   border:none;
}
#me-content iframe{
   border:none; 
   display:block; 
   overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}

蚂蚁尝试link 1 link 2

jsfiddle

Answer 4

从html中删除样式并添加scrolling =“yes”＆gt;＆gt; http://jsfiddle.net/95Tes/

<!--same code as before just remove your css styles from the html -->

Answer 5

这段代码可能对你有所帮助。我没有mac所以请不要给任何负面的点，我希望。我想说你不要在css规则和html风格中使用不同的风格。你用的就像那样

<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>


#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

查看其他标签中的图像或首先保存图像，看得更清晰！

请使用我修改过css以及html

的代码

       <style>
*{
    margin:0px;
    paddinig:0px;
    }

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#clearboth {
   clear:both;
}
#me-content{
    height:calc(100% - 40px);
    width:100%;
    position:relative;
    border:1px solid #ff9900;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
    width:100%;
    height:100%;
}

       </style>

这是修改后的html

         <div id="me-branding-bar">

        </div>

        <div id="clearboth"></div>

        <div id="me-content">
            <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
            src="http://www.tsn.ca"></iframe>
        </div>

希望它能奏效！