Iframe内部元素超出iframe区域

Question

问题

我在父页面中嵌套了一个 iframe，在 iframe 进行操作时，会出现 iframe 位置不变，但内部元素超出 iframe 区域的情况。

iframe 布局方式

.frame {
  position: fixed;
  top: 0;
  right: -600px;
  width: 600px;
  height: 100%;
  z-index: 1000;
  outline: 0;
  border: 0;
  background-color: #fff;
  transition: right .5s;
  -webkit-transition: right .5s;

}
.frame_open {
  right: 0px;
  box-shadow: -6px 6px 12px 0 rgba(26,37,57,0.2);
}

通过添加/删除 chateasy-frame_open 类名来控制iframe的显示隐藏

问题截图

操作图示：

开发者工具调试图示：

已经尝试的操作

1. 将 iframe 内的页面设置为 overflow: hidden; ，没有效果
2. 怀疑是父级页面的滚动条宽度撑开，所以更改 iframe 布局后仍会触发
   

开发环境

• Chrome：版本 66.0.3359.117（正式版本） （64 位）

Answer 1

解决方案

1. 经过尝试后，去除 iframe 的 box-shadow 样式即可解决该问题。
2. 为了保留阴影，用加了阴影样式的 div 将 iframe 包裹

遗留问题

box-shadow 导致 iframe 内部元素错位的原因是什么？

Answer 2

例子

你看这个列子内容都没超出去。

又试了下，这个还真不是iframe的问题，应该是你页面内容的问题