html - 无法让滚动条出现在 iframe 上

Question

我在网页上有一个信息弹出窗口。它包含一个显示信息的 iframe。我似乎无法让垂直滚动条出现，所以有些内容没有显示。

这是弹出窗口的 html，取自 chrome 开发工具(所以大概是在 jquery lightbox 挥动它的魔杖之后):

    <div id="lightbox" style="z-index: 10500; top: 1030.6px; left: 0px;">
        <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); width: 620px; display: block; height: 320px;">
             <div id="modalContainer" style="display: none; padding: 10px;"></div>
             <div id="frameContainer" style="padding: 10px;">
                 <iframe id="lightboxFrame" style="z-index: 10500;" frameborder="0" width="600px" height="300px" scrolling="no" src="Info.html?lang=grch&amp;item=436"></iframe>
            </div>
          <div id="imageContainer" style="display: none; padding: 10px;">
               <img id="lightboxImage" style="display: none;">
               <div id="hoverNav" style="display: none; z-index: 10500;">
                    <a id="prevLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a>
                    <a id="nextLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a>
               </div>
          </div>
          <div id="loading" style="z-index: 10500; display: none;">
               <a href="#" id="loadingLink"></a>
          </div>
      </div>
      <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); display: block; width: 620px;">
          <div id="imageData"><div id="frameHoverNav" style="display: block; z-index: 10500;">
            <a id="framePrevLink" href="#" style="padding-top: 10px; display: none;"></a>
            <a id="frameNextLink" href="#" style="padding-top: 10px; display: none;"></a>
        </div>
        <div id="imageDetails">
            <span id="caption" style="z-index: 10500;">&nbsp;</span>
            <span id="numberDisplay" style="display: none;"></span>
        </div>
        <div id="bottomNav">
            <a id="bottomNavClose" href="#" style="background-color: rgb(255, 255, 255);">schließen</a>
        </div>
    </div>
</div>
</div>

我尝试过的:

• 从 iframe 中移除 scrolling="no"
• 在 iframe 上设置 scrolling="yes"
• 向灯箱元素和/或 iframe 元素添加 css 样式:overflow: auto
• 添加溢出:滚动到灯箱和/或 iframe 元素。
• 向所有元素添加 overflow: auto
• 添加溢出:滚动到所有元素
• 对着我的屏幕说脏话
• 喝杯咖啡
• 在 SO 上发布

我不确定是什么覆盖了这里的溢出属性。引用用户的话说，“它在 IE 中完美显示”，但在 FF 或 Chrome 中则不然。

Answer 1

尝试使用scrolling="yes":

    <div id="lightbox" style="z-index: 10500; top: 1030.6px; left: 0px;">
        <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); width: 620px; display: block; height: 320px;">
             <div id="modalContainer" style="display: none; padding: 10px;"></div>
             <div id="frameContainer" style="padding: 10px;">
                 <iframe id="lightboxFrame" style="z-index: 10500;" frameborder="0" width="600px" height="300px" scrolling="yes" src="http://en.wikipedia.org/wiki/Main_page"></iframe>
            </div>
          <div id="imageContainer" style="display: none; padding: 10px;">
               <img id="lightboxImage" style="display: none;">
               <div id="hoverNav" style="display: none; z-index: 10500;">
                    <a id="prevLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a>
                    <a id="nextLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a>
               </div>
          </div>
          <div id="loading" style="z-index: 10500; display: none;">
               <a href="#" id="loadingLink"></a>
          </div>
      </div>
      <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); display: block; width: 620px;">
          <div id="imageData"><div id="frameHoverNav" style="display: block; z-index: 10500;">
            <a id="framePrevLink" href="#" style="padding-top: 10px; display: none;"></a>
            <a id="frameNextLink" href="#" style="padding-top: 10px; display: none;"></a>
        </div>
        <div id="imageDetails">
            <span id="caption" style="z-index: 10500;">&nbsp;</span>
            <span id="numberDisplay" style="display: none;"></span>
        </div>
        <div id="bottomNav">
            <a id="bottomNavClose" href="#" style="background-color: rgb(255, 255, 255);">schließen</a>
        </div>
    </div>
</div>

在这里查看 fiddle :http://jsfiddle.net/f8yMB/

如果不是，则问题出在 info.html 页面上。