css - IFrame 在 IE 中重叠 Div(在 Chrome 中工作正常)

标签 css html iframe

我写了一些代码,其中 div 应该与 IFrame 重叠。在 Chrome 中,它工作正常,而在 IE 中,IFrame 与 div 重叠。下面是代码。关于如何解决此问题以使其在 IE 和 Chrome 上都能正常工作的任何想法?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>IFrame Div</title>
    </head>
    <body>
        <div top="86px" left="5px" width="500px" height="500px" z-index="20000" style="width: 1000px;
            border-color: red; height: 500px; position: absolute !important; border-color: red;
            left: 5px; top: 86px; border-width: 5px; background-color: #E6E6E6; opacity: .8;">
        </div>
        <iframe src="http://samplepdf.com/sample.pdf" height="700px" width="600px"></iframe>
    </body>
    </html>

最佳答案

给出 iframe:z-index:-999;

或者您可以使用内联 CSS:<iframe src="http://samplepdf.com/sample.pdf" height="700px" width="600px" style="z-index:-999;"></iframe>

关于css - IFrame 在 IE 中重叠 Div(在 Chrome 中工作正常),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19430186/

相关文章:

javascript - 如何使用jquery获取双击之间的时间差?

html - apache 无法访问 html 子目录并出现 404 错误

html - 使用 z-index 和不透明度没有给出预期的结果(图像和文本布局)

css - 垂直对齐 Bootstrap 4 导航栏折叠按钮

JavaScript 显示和隐藏选择列表

html - 使包含 img 的 div 占据全高

javascript - 确定浏览器是否支持 iFrame 中的 javascript?

iframe - 内容安全策略、X-Frame-Options 和 localhost

html - Bootstrap 中的 iframe 中心

html - 即使在使用 reset.css 之后,字体字距在 chrome 和 firefox 中也有所不同