PDF中的iFrame重叠的顶部导航栏在Internet Explorer中 [英] Pdf in Iframe overlapping top navigation bar in internet explorer
问题描述
我的工作与母版asp.net网络表单。母版页有一个顶部导航栏和侧栏。边栏旁边我打电话的ContentPlaceHolder中，我已经把一个iframe。在IFRAME我在iframe中打开PDF文件files.pdf;这是工作的罚款与其他浏览器，但是当我在Internet Explorer中打开该页面时，iframe重叠顶部菜单:(好心帮我解决这个问题。
下面是我的母版页code
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV ID =包装类=mywrapper＆GT;
＆LT;！ - 导航 - ＆GT;
＆LT;！ - 固定导航栏 - ＆GT;
＆LT;导航类=导航栏导航栏默认导航栏固定顶的风格=的z-index：2;＆GT;
......
＆LT; / NAV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-3的风格=的z-index：2;＆GT;
＆LT; DIV CLASS =导航栏默认侧边栏角色=导航＆GT;
＆LT; DIV CLASS =侧边栏导航＆GT;
...................
＆LT; / DIV＆GT;
＆所述;！ - /.sidebar-collapse - ＆GT;
＆LT; / DIV＆GT;
＆所述;！ - /.navbar-static-side - ＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-9 COL-SM-9 COL-LG-9的风格=背景色：#FFF; z-index的：1; ＆GT;
＆LT; ASP：的ContentPlaceHolder ID =ContentPlaceHolder1=服务器＆GT;
＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
下面是我的内容aspx页面
＆LT; DIV CLASS =嵌入响应嵌入响应-16by9的风格=高度：1000像素;＆GT;
＆LT; IFRAME ID =myiframe级=嵌入响应项目=服务器＆GT;＆LT; / IFRAME＆GT;
＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;
下面是我的内容CS页
保护无效的Page_Load（对象发件人，EventArgs的发送）
{
字符串PageToOpen = Request.QueryString.Get（开放）;
myiframe.Attributes.Add（src用户，PageToOpen）;
}
我觉得你需要设置的iframe的wmode为不透明
＆LT; IFRAME ...的wmode =不透明＆GT;＆LT; / IFRAME＆GT;
请参阅
<一href=\"https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe\">z-index不会在Internet Explorer，在IFRAME
<一href=\"https://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index/9074366#9074366\">YouTube视频通过IFRAME忽略的z-index嵌入式？
此外，这是很难说，当你不告诉我们您所定义的样式。
但它最有可能与z-index的问题。
没关系，似乎是唯一的Flash视频。
就在iframe（蓝格）之前设置的导航栏的高度一个div。
这样的话，你不应该需要的z-index
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;
测试
＆LT; /标题＆GT;
＆LT;风格类型=文/ CSS＆GT;
HTML，身体
{
宽度：100％;
高度：100％;
保证金：0像素;
填充：0像素;
}
.navbar固定顶
{
位置：固定;
显示：块;
宽度：100％;
背景色：红色;
高度：50像素;
顶：0像素;
} .sidebar
{
显示：块;
浮动：左;
宽度：20％;
高度：900px;
背景颜色：绿色;
} ＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV ID =包装类=mywrapper＆GT; ＆LT;！ - 导航 - ＆GT;
＆LT;！ - 固定导航栏 - ＆GT;
＆LT;导航类=导航栏导航栏默认导航栏固定顶的风格=的z-index：2;＆GT;
......
＆LT; / NAV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-3的风格=的z-index：2;＆GT;
＆LT; DIV CLASS =导航栏默认侧边栏角色=导航＆GT;
＆LT; DIV CLASS =侧边栏导航＆GT;
...................
＆LT; / DIV＆GT;
＆所述;！ - /.sidebar-collapse - ＆GT;
＆LT; / DIV＆GT;
＆所述;！ - /.navbar-static-side - ＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-9 COL-SM-9 COL-LG-9的风格=背景色：#FFF; z-index的：1;背景色：黄色;＆GT;
＆LT; DIV的风格=显示：块;宽度：100％;高度：60像素;背景色：蓝色;＆GT; AAAA＆LT; / DIV＆GT;
＆LT; IFRAME SRC =有关：空白FRAMEBORDER =0的风格=宽度：80％;高度：500像素;边界：无;＆GT;＆LT; / IFRAME＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 结束行 - ＆GT;
＆LT; / DIV＆GT;＆LT;！ - 结束包装 - ＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
I am working on asp.net webform with a masterpage. The master page has a top navigation bar and a side bar. beside side bar i called contentplaceholder in which i've put an iframe. in that iframe i am opening the pdf-file "files.pdf" in an iframe; it is working fine with other browsers but when i open this page in internet explorer, the iframe overlaps the top menu :( kindly help me to resolve this issue .
Here is my Master Page Code
<body>
<form id="form1" runat="server">
<div id="wrapper" class="mywrapper">
<!-- Navigation -->
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
......
</nav>
<div class="row">
<div class="col-md-3" style="z-index:2;">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav">
...................
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</div>
<div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1;" >
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
Here is my Content aspx Page
<div class="embed-responsive embed-responsive-16by9" style="height:1000px;">
<iframe id="myiframe" class="embed-responsive-item" runat="server" ></iframe>
</div>
</asp:Content>
Here is my Content cs Page
protected void Page_Load(object sender, EventArgs e)
{
string PageToOpen = Request.QueryString.Get("open");
myiframe.Attributes.Add("src", PageToOpen);
}
I think you need to set the iframe wmode to "opaque"
<iframe ... wmode="opaque"></iframe>
See
z-index does not work in Internet Explorer with pdf in iframe
and
YouTube Video Embedded via iframe Ignoring z-index?
Also, it's hard to tell when you don't show us the styles you have defined.
But it's most-likely an issue with the z-index.
Never mind, seems to be for flash video only.
Just set a div with the height of the navigation bar before the iframe (the blue div).
That way, you shouldn't need the z-index.
<!doctype html>
<html>
<head>
<title>
Test
</title>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.navbar-fixed-top
{
position: fixed;
display: block;
width: 100%;
background-color: red;
height: 50px;
top: 0px;
}
.sidebar
{
display: block;
float: left;
width: 20%;
height: 900px;
background-color: green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper" class="mywrapper">
<!-- Navigation -->
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
......
</nav>
<div class="row">
<div class="col-md-3" style="z-index:2;">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav">
...................
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</div>
<div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1; background-color: yellow;">
<div style="display: block; width: 100%; height: 60px; background-color: blue;">aaaa</div>
<iframe src="about:blank" frameborder="0" style="width: 80%; height: 500px; border: none;"></iframe>
</div>
</div> <!-- End Row -->
</div><!-- End Wrapper -->
</form>
</body>
</html>
这篇关于PDF中的iFrame重叠的顶部导航栏在Internet Explorer中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
