Question

我在网页上有一个信息弹出窗口。它包含一个显示信息的iframe。我似乎无法显示垂直滚动条，因此某些内容未显示。

这是弹出窗口的html，取自chrome dev工具（因此可能是在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
在iframe上设置scrolling =“yes”
向灯箱元素和/或iframe元素添加css样式：overflow：auto
添加溢出：滚动到灯箱和/或iframe元素。
添加溢出：自动添加到所有元素
添加溢出：滚动到所有元素
在屏幕上说出令人讨厌的东西
喝咖啡
在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>

请参阅此处的小提琴：http://jsfiddle.net/f8yMB/

如果没有，则问题出在info.html页面上。

无法让滚动条显示在iframe上

1 个答案: