Safari Block格式化上下文保证金问题

Question

＆＃13;

＆＃13;

#wrapper {
  height: 3em;
  width: 10em;
  border: 2px solid #999;
  text-align: center;
}
.left {
  background-color: darkseagreen;
  width: 30%;
  float: left;
}
.right  {
  background-color: #ff7f50;
  margin-left: 40%;
  overflow: hidden;
}

＆＃13;

<div id="wrapper">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这在Chrome中可以正常运行。 left占宽度的30％。阻止格式化上下文因overflow:hidden而生效，left和right块之间存在10％的差距。

但在Safari中，这不起作用。没有10％的差距。

但是，当overflow:hidden被注释掉时，它似乎有效。

如何让Block Formatting Context在这两个浏览器中保持一致？

http://codepen.io/anon/pen/WbgVgP（在Chrome和Safari中打开this stackoverflow页面或codepen.io页面。）