Safari为什么会以不同的方式呈现CSS多列布局？ [英] Why does Safari render CSS multi-column layout differently?

问题描述

我正在建立

I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.

I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.

I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.

Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.

Chrome renders:

Safari renders:

I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.

notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.

解决方案

add a min-height to <ul> seems to fix the issue

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

tested on Safari 5.1.7 (7534.57.2) for PC

bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1

这篇关于Safari为什么会以不同的方式呈现CSS多列布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！