css - IE 对 Iframe 的行为完全不同

Question

我有一个 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> 

CSS 是

/* 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 中---

在 Chrome 中---

Answer 1

我可能错了，但在我看来罪魁祸首是人字形按钮 glyphicon-chevron-left， 而不是 iframe；

试着给你的按钮一个宽度，例如:

style="margin-top:28%;height:4%;width:20px"

否则 IE 会给它最大宽度，这不是你想要的。

---

现在要防止 IE 滚动条与您的内容重叠:

html { -ms-overflow-style: scrollbar; }