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

标签 css google-chrome safari css-multicolumn-layout

我正在 build a website并主要在 Chrome 上测试它,间歇性地检查它是否仍然可以在 Firefox 上运行。

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

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

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

Chrome 渲染: chrome rendering

Safari 呈现: safari rendering

我非常喜欢 Chrome 呈现列的方式,所以我想知道是否有一种方法可以强制 Safari 以这种方式呈现网站,可能根本不改变 html 布局。

注意:Firefox 的呈现方式与 Chrome 相同,无需修复。我不是为 IE 开发,所以我不知道它是如何呈现的。

最佳答案

我遇到了同样的问题,但 min-height 不起作用。我在 Bootstrap .col-md-12 容器上设置了列数,这对我来说是个问题。

我添加了一个带有所需类的子 div,它运行良好

关于css - 为什么 Safari 以不同方式呈现 CSS 多列布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14148078/

相关文章:

javascript - 如何检测用户在 Javascript 中输入表情符号、特殊/外来字符和其他输入 - 没有 keyup 事件?

html - 如何使html数据列表溢出?

javascript - Chrome WebRTC 在使用adapter.js 进行浏览器更新时中断

css 位置属性在 chrome 29 中不起作用

javascript - 删除/移动 Google Chrome 左下角的状态栏(链接地址栏)

ios - 在 iOS 上, "add to homepage"缓存保存在哪里,如何清除它?

angularjs - 适用于 Safari 的 AWS (Cloudfront/S3) 上的 Angular

应用动画后 CSS 样式擅离职守

javascript - 函数在未被调用时执行

html - Wordpress:如何添加与图像边缘右对齐的标题