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

问题:

I have an iframe. The content is wider than the width I am setting so the iframe gets a horizontal scroll bar. I can't increase the width of the iframe so I want to just remove the scroll bar. I tried setting the scroll property to "no" but that kills both scroll bars and I want the vertical one. I tried setting overflow-x to "hidden" and that killed the horizontal scroll bar in ff but not in IE. sad for me.

回答1:

scrolling="yes"  horizontalscrolling="no" verticalscrolling="yes"

Put that in your iFrame tag.

You don't need to mess around with trying to format this in CSS.

回答2:

The scrollbar isn't a property of the <iframe>, it's a property of the page that it contains. Try putting overflow-x: hidden on the <html> element of the inner page.

回答3:

You could try putting the iframe inside a div and then use the div for the scrolling. You can control the scrolling on the div in IE without issues, IE only really has problems with iframe scrolling. Here's a quick example that should do the trick.

<html>
    <head>
        <title>iframe test</title>

        <style>         
        #aTest { 
            width: 120px;
            height: 50px;
            padding: 0;
            border: inset 1px #000;
            overflow: auto;
        }

        #aTest iframe {
            width: 100px;
            height: 1000px;
            border: none;
        }
        </style>
    </head>
    <body>
        <div id="aTest">
            <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe>
        </div>
    </body>
</html>

回答4:

<iframe style="overflow:hidden;" src="about:blank"/>

should work in IE. IE6 had issues supporting overflow-x and overflow-y.

One other thing to note is that IE's border on the iframe can only be removed if you set the "frameborder" attribute in camelCase.

<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/>

it would be nice if you could style it properly with CSS but it doesn't work in IE.

回答5:

All of these solutions didn't work for me or were not satisfactory. With the scrollable DIV you could make the horizontal scrollbar go away, but you'd always have the vertical one then.

So, for my site where I can be sure to control the fixed height of all iframes, this following solution works very well. It simply hides the horizontal scrollbar with a DIV :)

    <!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes -->
<!--[if IE]>
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;">
</div>
<![endif]-->
<script type="text/javascript">
  if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null)
  {
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block";
  }
</script>