CSSの高さ：0とオーバーフロー：余白で隠されたサファリの動作が異なります

Question

問題は私がmargin:20px;とdivを持っているため、divを非表示にしています。height:0px;overflow:hiddenをdivに追加しました。これは、marginが適用されていないSafariまでうまくいきます。

他のブラウザ結果：

差が緑色の輪郭である

サンプル・コードは、ここでhttps://jsfiddle.net/cattails27/1no9u54t/2/

Safariの出力を見つけました。サファリでは、height:0;overflow:hidden;と設定すると余白に影響します。他のブラウザでは、divの余白はまだ有効です。テスト

---

ブラウザ：

• Safariのバージョン9.0.2
• クロームバージョン49.0.2623.112（64ビット）
• のFirefox 45.0.1
• マイクロソフトエッジ20.10240.16384.0

---

そうでもない懸念が、IE11でテストは、いくつかの興味深い結果がこの周り

IE 11バージョン11.0.10240.16431

Answer 1

私の仕事ではなく、height:0pxを設定する、小型でそれを置き換えるために生成しましたheight:0.01pxのような値であり、私はテストを使用しているブラウザ全体で統一された結果を生成します。しかし、私は誰かがより良い解決策を願っています。