CSS CSS3 多列布局 IE 解决方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5670983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 multi column layout IE workaround
提问by Robert Koritnik
I've stumbled across a really great project (CSS3 PIE)today that makes it possible to use CSS3 rounded corners, shadows and gradients even in IE6, IE7 and IE8 using CSS settings and usual CSS3 notation.
我今天偶然发现了一个非常棒的项目 (CSS3 PIE)，它可以使用 CSS 设置和常用的 CSS3 符号在 IE6、IE7 和 IE8 中使用 CSS3 圆角、阴影和渐变。
It uses *.htc filethat does the trickery and makes it really transparent for developers (as in set it and forget it - no additional script calls when creating new pages or changing existing ones (provided you don't change CSS)).
它使用 *.htc 文件来进行诡计并使其对开发人员真正透明（如设置并忘记它 - 在创建新页面或更改现有页面时没有额外的脚本调用（前提是您不更改 CSS））。
I wonder if there's anything similar for multi column layout that can be used. Floating is not an option because content is not laid out top to bottom - left to right, but rather left to right - top to bottom...
我想知道是否有类似的多列布局可以使用。浮动不是一种选择，因为内容不是从上到下 - 从左到右，而是从左到右 - 从上到下布局......
Anybody developing something similar for CSS3 multi column layout?
有人为 CSS3 多列布局开发类似的东西吗？
采纳答案by thirtydot
Maybe the Columnizer jQuery Plugin?
Unfortunately, it doesn't parse your stylesheet and look for the relevant properties like CSS3 PIE does (a very convenient feature).
不幸的是，它不会像 CSS3 PIE 那样解析您的样式表并查找相关属性（一个非常方便的功能）。
Both CSS3 PIE and that plugin rely on JavaScript.
CSS3 PIE 和该插件都依赖于 JavaScript。
回答by Robert Koritnik
Another solution for lists that should flow in column order (as in phonebooks)
应按列顺序排列的列表的另一种解决方案（如在电话簿中）
I asked the question mainly because I had to display a list of about 1000 users. This kind of list is very long and involves a lot of scrolling. So I needed a solution to put these users in columns so they also flow from top to bottom column by column from left to right. CSS3 multi-column layout provides exactly what I need, but browser support is the problem. They're still not supported on IE9 and my users mainly use IE (8 or 9). Hence I needed a solution to work using CSS2.1
我问这个问题主要是因为我必须显示大约 1000 个用户的列表。这种列表很长，涉及大量滚动。所以我需要一个解决方案将这些用户放在列中，这样他们也可以从左到右逐列从上到下流动。CSS3 多列布局正是我所需要的，但浏览器支持是问题所在。IE9 仍然不支持它们，我的用户主要使用 IE（8 或 9）。因此我需要一个使用 CSS2.1 的解决方案
That's the reason I've written a jQuery pluginthat takes a set of elements that are either set to float: left/right;or display: inline-block;and transposes them so they're ordered in the order of column layout.
这就是我编写了一个jQuery 插件的原因，它接受一组元素，这些元素要么被设置为float: left/right;要么，display: inline-block;然后将它们转置，以便它们按照列布局的顺序排列。
Plugin reorders elements and doesn't add any column wrappers or anything. It just rearranges elements so they seem to be flowing in columns instead of rows.
插件重新排序元素并且不添加任何列包装器或任何东西。它只是重新排列元素，使它们似乎在列而不是行中流动。
You can check my blog postwhere the problem is detailed and you can also see a working example that rearranges/transposes US States. Or you can also watch the project on GitHuband get updates when a new version is out (or report issues you may have with it).
您可以查看我的博客文章，其中详细说明了问题，您还可以查看重新排列/转换美国各州的工作示例。或者您也可以在 GitHub 上观看该项目并在新版本发布时获取更新（或报告您可能遇到的问题）。
回答by MonkeyVoodoo
If you have simple list items, this might be enough https://github.com/hamsterbacke23/multicolumn-polyfill
如果您有简单的列表项，这可能就足够了 https://github.com/hamsterbacke23/multicolumn-polyfill
回答by clairesuzy
you might like to try this one..
你可能想试试这个..
it's been a while since I tested it out, but it does mean you use the proposed properties so it can be used as an enhancement
自从我测试它已经有一段时间了，但这确实意味着您使用了建议的属性，因此可以将其用作增强功能
I'll see if I can find my test case to put in a fiddle
我会看看我是否能找到我的测试用例放在一个小提琴上
Update
更新
here's the Example fiddle
这是示例小提琴
Notes (and disclaimer) it's been couple years since I did this demo, it won't work natively from the fiddle (what you'll see is what the browser actually supports), - for the script to work the CSS has to be in a linked file, which I don't think I can do on a fiddle, it puts it inline
注释（和免责声明）我做了这个演示已经有几年了，它不能从小提琴本地工作（你将看到的是浏览器实际支持的内容）， - 要使脚本工作，CSS 必须在一个链接文件，我认为我不能在小提琴上做，它把它放在内联
Top half is showing what is supported or what the script can do if you download it, bottom is a (table based) mockup up of expectations according to the recs (though remember I said it's a few years since I did this)
上半部分显示了支持的内容或下载脚本后可以做什么，下半部分是根据 recs 的（基于表格的）期望模型（尽管请记住我说过我这样做已经有几年了）
neither Safari nor Firefox matches the "Expected: Table Mockup demo" but all browsers I tested in locally look the same.. with nice neat even columns, IE7 gets it 50% right it has 3 columns but only uses 2 of them?? - no browser does the heading spanning multiple rows, either natively or with the script, so I put that down to "a not yet decided upon feature" ;)
Safari 和 Firefox 都不匹配“Expected: Table Mockup demo”，但我在本地测试的所有浏览器看起来都一样..有漂亮整齐的均匀列，IE7 获得 50% 正确，它有 3 列但只使用其中的 2 列？- 没有浏览器会跨越多行的标题，无论是本机还是脚本，所以我把它归结为“尚未决定的功能”;)
anyway just throwing it out there as an option - maybe someone with more savvy than me could improve the script?
无论如何只是将它作为一种选择扔在那里 - 也许比我更精明的人可以改进脚本？
