如何在 IE 上显示 CSS3 列？答案

【问题标题】：How to display CSS3 columns on IE?如何在 IE 上显示 CSS3 列？
【发布时间】：2011-07-17 21:51:59
【问题描述】：

IE doesn't support CSS3 columns — 没什么大不了的，对吧？尽管如此，我正在尝试找到任何类似modernizr 的库来解决这个问题。我真的不想为 IE 编写不同的 CSS，因为这会让我们对我们都鄙视的东西给予过多的关注和关注。有什么建议吗？

【问题讨论】：

您的问题是 IE 是一个相对问题...有些版本支持某些东西，而有些版本不支持。那里有各种各样的版本……有些人仍在使用 6！然而 9 可能会支持 CSS3，尽管我没有研究它，因为我现在不做 Web 开发，也不使用 IE。但是你的问题有点令人困惑，因为你说你想支持 IE，但不想为 IE 调整你的 css……你不能不调整就支持 IE……
我说我不想为 IE 编写不同的 CSS。我真的很期待一个 JavaScript 兼容性库或类似的东西，但是好吧.. 让我们调整一下吧。
如果你不想为IE写不同的CSS，那就不要支持IE。
IE9 不支持 CSS3 列（是不是很棒？）。因此，您必须使用 polyfill 或添加额外的 CSS 钩子以使其在 IE 中看起来不错。如果您在任何大型的面向公众的网站上工作，那么祝您完全放弃 IE。悲伤，但真实。

【解决方案1】：

如果没有看到您的代码，我建议将每一列放在一个 div 中。然后在只为 IE 加载样式表后重新定义 body 标签，并为 div 添加样式。

仅适用于 IE：

<!--[if IE]>
   **** your styles ****    
<![endif]-->

您甚至可以更进一步，将正文样式移动到它自己的样式表中，并根据浏览器加载您需要的样式表。这取决于你想走多远。

【讨论】：

【解决方案2】：

Pragmatic Programmer 的HTML5 and CSS3 书中对此类内容提供了一些很好的建议。对于列，IE 推荐使用Columnizer Plugin for jQuery。

【讨论】：

【解决方案3】：

看看这些关于 ALA 的文章，我想他们可能正好有你要找的东西..
Stop Forking with CSS3
Taking Advantage of HTML5 and CSS3 with Modernizr

【讨论】：

【解决方案4】：

尝试在您想要布置为表格的项目上设置display: inline-table;

【讨论】：

【解决方案5】：

从 IE10 开始，现在有对 CSS3 列的原生（和无前缀）支持。

【讨论】：

【解决方案6】：

CSS3 提供了一种将任何 HTML 节点的内容转换为任意数量的列的方法。有用于控制列数及其宽度、相对高度（“填充”或内容如何在现有列之间划分）、列之间的间距、“规则”（分隔线或边框）等的属性。

作为起点，请参阅w3schools.com CSS3 Multiple Columns 参考页面。

但是，像往常一样，在广泛使用的浏览器中，只有 IE 不支持 column-CSS3 属性，IE10 除外。

一种跨浏览器解决方案是Columnizer jQuery Plugin。

【讨论】：