なぜSafariはCSSの複数列レイアウトを異なる方法でレンダリングしますか？

Question

私はa websiteをビルドしており、Chromeでテストしていますが、これはFirefoxで動作するかどうかを断続的に確認しています。

私は、ChromeとSafariの両方がWebKitで実行されているため、Webサイトを同じようにレンダリングすると考えました。しかし、これは事実ではありません。

私はSafariでのサイトをチェックしていたと私はcolumn-count（両方-moz-と同じ値を持つ-webkit-）を順不同リストを使用して、私のメニューバー、ということに気づいた、とカラムの充填の間に差があることに気づきました。

Safariが列を1つずつ塗りつぶしている間に、クロムが均等に塗りつぶしているようです。下の画像はこれを示しています。

のSafariのレンダリング：

Chromeがレンダリング

私は非常に多くの列をレンダリングするクロム道のようなので、サイトをレンダリングするためのSafariを強制する方法がある場合、私は思っていましたおそらくhtmlのレイアウトを全く変更することなく、この方法で行うことができます。

注： FirefoxはChromeと同じレンダリングで、修正する必要はありません。私はIE用に開発していないので、どのようにレンダリングするのか分かりません。

Answer 1

<ul>にmin-heightを追加し、問題を解決する

nav ul { ... min-height:50px; } /* < add */ 

PC用のSafari 5.1.7（7534.57.2）でテスト

バグがあまりにもここで参照されているようだ：私はhttp://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1

Answer 2

同じ問題があったが分の高さが機能しませんでした。私はBootstrap .col-md-12コンテナに列数を設定しましたが、これは私の問題でした。

私は1pxの高さとSafariの上に表示列の内容と同様の問題を抱えていた私は、必要なクラスと子のdivを追加し、それは完全に

Answer 3

を働きました。私は"min-height：100％"を要素に追加しました。私はbody/htmlと要素を含む "height：100％"も持っていますが、これが正しく動作するようになっていると仮定します。