3

我的 .net 项目中有一个自定义 HTML 处理程序，它显示 PDF 文件，在 chrome 和其他浏览器中它可以正确显示，但即​​ PDF 的 z-index 高于所有其他堆叠元素。我的意思是当我滚动时，iframe 中的 pdf 会出现在我的菜单和其他固定元素上。

4

2 回答 2

7

我在 IE 页面上的任何自由浮动元素都遇到了同样的问题，这个功能解决了这个问题。

function fixPDFzIndexIssue (idToFix) {
    if(!idToFix) return "Please provide the id of the div to fix";

    var $divToFix = $('#' + idToFix);

    $divToFix.wrap("<div class='outer'></div>");

    $(".outer").append("<iframe src='about:blank' class='cover'>");
    $(".cover").css({
        'min-width': '100%',
        'min-height': '100%',       
        'overflow': 'hidden',
        'position': 'absolute',
        'border': 'none',
        'left': 0,
        'top':0,
        'z-index': -1
    });
}

似乎任何悬停在 PDF 上的 div 都需要在其下方放置一个 iFrame，以便它在 PDF 上呈现。

于 2014-10-09T14:30:06.527 回答
0

我花了整整 2 天的时间才找到合适的解决方法！使我的菜单在 IE11 中的 iframe pdf 上悬停时可见。上述解决方案基本上成功了！但是，上述解决方案并非开箱即用！特别是，我的意思是，“.cover iframe”附加到“.outer”div 上。对我有用的（之前在这里提到过：https : //stackoverflow.com/a/47044510）是将“.cover iframe”附加到“最内层”（IOW：深层、嵌套、最低级别）列表菜单元素（“li.menuelement”）！

jQuery("li.menuelement").append("<iframe src='about:blank' class='cover'>");
jQuery(".cover").css({
    'min-width': '100%',
    'min-height': '100%',       
    'overflow': 'hidden',
    'position': 'absolute',
    'border': 'none',
    'left': 0,
    'top':0,
    'z-index': -1
});

现在，就我而言，我通过上面的 Javascript 仅将“.cover iframe”应用（附加）到我的菜单的许多列表元素（“li.menuelement”）中的一个来使它工作！整个菜单在 iframe pdf 前悬停时变得可见！我很兴奋终于想通了！（顺便说一句：我的是在企业环境中的服务器上运行的 DokuWiki 实例中的真实修复。）

于 2021-09-10T08:54:18.300 回答