可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.

I used the following html code -

**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src =       "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
     height = "400" width = "500">**

This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?

回答1:

Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):

<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>

回答2:

In your iframe content add inline:

<body style="overflow:auto;">

or in the css file attached to the iframe

html, body {
   overflow:auto;
}

and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:

<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>

If it still does not work then try to wrap the iframe like this:

<div style="overflow:visible; height:400px;">

    <iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>

</div>

回答3:

Yap Tom is absolutely right you can use

<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>

and it should be work as i have tested.

If it still does not work then update Chrome to latest version. :)

回答4:

To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>