0

我在网页上有一个信息弹出窗口。它包含一个显示信息的 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 样式：溢出：自动
  • 添加溢出：滚动到灯箱和/或 iframe 元素。
  • 向所有元素添加溢出：自动
  • 添加溢出：滚动到所有元素
  • 在我的屏幕上说脏话
  • 喝杯咖啡
  • 在 SO 上发帖

我不确定这里的溢出属性是什么。引用用户的话，“它在 IE 中完美显示”，但在 FF 或 Chrome 中却没有。

4

1 回答 1

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页面上。

于 2013-02-13T12:04:37.693 回答