CSS height:0 和 overflow:hidden with margin 在 safari 上有不同的行为答案

【问题标题】：CSS height:0 and overflow:hidden with margin has a different behavior on safariCSS height:0 和 overflow:hidden with margin 在 safari 上有不同的行为
【发布时间】：2016-06-13 13:30:18
【问题描述】：

我遇到的问题是我有一个带有 margin:20px; 的 div 来隐藏它，我将样式 height:0px;overflow:hidden 附加到 div 中。在没有应用 margin 的 Safari 之前，此方法效果很好。

在此处找到示例代码https://jsfiddle.net/cattails27/1no9u54t/2/

Safari 输出：

其他浏览器结果：

区别在于绿色轮廓。在 safari 上，设置 height:0;overflow:hidden; 会影响边距。在其他浏览器上，div 的边距仍然有效。

经过测试的浏览器：

Safari 版本 9.0.2
Chrome 版本 49.0.2623.112（64 位）
Firefox 45.0.1
Microsoft Edge 20.10240.16384.0

不是很担心，但在 IE11 上进行的测试产生了一些有趣的结果

IE 11 版本 11.0.10240.16431

【问题讨论】：

那是什么？ outline?
是的，我添加了outline 来演示这个问题
为什么不删除 outline:none 之类的轮廓，而不是 height:0.01px？
它不是我关心的轮廓，但区别在于与margin 属性的间距，但谢谢！

标签： css cross-browser

【解决方案1】：

我的解决方法是不设置height:0px，而是将其替换为height:0.01px 之类的小值，它会在我使用测试的浏览器中产生统一的结果。但我希望有人有更好的解决方案。

【讨论】：