为什么Safari以不同方式呈现CSS多列布局？

Question

我正在构建一个网站,并在Chrome上进行测试,间歇性地检查它是否仍适用于Firefox.

我认为,由于Chrome和Safari都在WebKit上运行,因此它们会以相同的方式呈现网站.但事实并非如此.

我正在检查Safari上的网站,我注意到我的菜单栏,它使用了一个无序列表column-count(两个-moz-并且-webkit-具有相同的值),并注意到填充列之间存在差异.

Chrome似乎可以均匀地填充列,而Safari只是逐个填充列.下面的图片说明了这一点.

Chrome呈现: 铬渲染

Safari呈现: 野生动物园渲染

我非常喜欢渲染列的镀铬方式,所以我想知道是否有办法迫使Safari浏览器渲染网站这种方式,有可能在不改变html布局的.

注意: Firefox渲染与Chrome相同,无需修复.我不是在为IE开发,所以我不知道它是如何渲染的.

Answer 1

我有同样的问题,但最小高度不起作用.我在Bootstrap .col-md-12容器上设置了列数,这对我来说是个问题.

我添加了一个带有所需类的子div,它工作得很好

我处于完全相同的情况,除了在我的情况下,症状是列元素根本没有出现 - 每个都有1px的高度.将div插入col-md-*容器并将列计数应用于该div解决了我的问题. (2认同)

Answer 2

添加一个min-height似乎<ul>可以解决问题

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

在 PC 版 Safari 5.1.7 (7534.57.2) 上测试