我有iframe
这是在我的网站内显示完全不同的网站的目标区域。在Mozilla和chrome中,我可以看到所需的输出,但在Internet Explorer中,侧边栏div
完全位于不同的位置。
这里是html代码
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
{% for Dashboard in dashboards %}
<li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<button class="pushed content" onclick="toggleMenu()" style="margin-top:28%;height:4%;"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
<div style="margin-left:-1%; margin-top:2.5%; height: 625px;" >
<iframe width="100%" height="100%" name="iframe_a" frameborder="0"></iframe>
</div>
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transition: left 1s ease-out;
margin-left: -1.5%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
任何人都可以帮我解决这个兼容性问题。 在IE中---
in chrome ---
答案 0 :(得分:0)
我可能错了,但在我看来罪魁祸首是雪佛龙按钮glyphicon-chevron-left
,
而不是iframe;
尝试给你的按钮一个宽度,例如:
style="margin-top:28%;height:4%;width:20px"
否则IE会给它最大宽度,这不是你想要的。
现在阻止IE滚动条重叠您的内容:
html { -ms-overflow-style: scrollbar; }