CSS 如何在 IE 上显示 CSS3 列?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5348061/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:58:00  来源:igfitidea点击:

How to display CSS3 columns on IE?

cssinternet-explorercross-browser

提问by Jo?o

IE doesn't support CSS3 columns— no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?

IE不支持 CSS3 列——没什么大不了的,对吧?尽管如此,我还是试图找到任何类似 Modernizr 的库来解决这个问题。我真的不想为 IE 编写不同的 CSS,因为那样会过多地关注和关注我们都鄙视的东西。有什么建议?

采纳答案by pdr

Pragmatic Programmer's HTML5 and CSS3book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQueryfor IE.

Pragmatic Programmer 的HTML5 和 CSS3一书对这样的东西有一些很好的建议。对于列,它建议使用Columnizer Plugin for jQueryfor IE。

回答by Jim Arment

As of IE10, there is now native (and un-prefixed) support for CSS3 columns.

从 IE10 开始,现在有对 CSS3 列的原生(和无前缀)支持。

http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx

回答by Lucius

Have a look at these articles on ALA, I think thay may just have what you were looking for..
Stop Forking with CSS3
Taking Advantage of HTML5 and CSS3 with Modernizr

看看上ALA这些文章,我想大公可能只是有你要找的..
停止的分岔与CSS3
以HTML5的优势和CSS3与Modernizr的

回答by ChristineC

Try setting display: inline-table;on the items you want laid out as a table

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

回答by Tyanna

Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.

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

For IE only:

仅适用于 IE:

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

You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.

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

回答by suigeneris

CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.

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

As a starting point, see the w3schools.com CSS3 Multiple Columnsreference page.

作为起点,请参阅w3schools.com CSS3 多列参考页面。

However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties, except for IE10.

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

One cross-browser solution is the Columnizer jQuery Plugin.

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