IE6 CSS 显示：表格修复？答案

【问题标题】：IE6 CSS display:table fix?IE6 CSS 显示：表格修复？
【发布时间】：2011-03-17 16:17:24
【问题描述】：

我正在开发一个网络应用程序......不幸的是，它必须与有史以来最糟糕的软件一起工作，是的，ie6。

我真的很喜欢 CSS display:table 和 display:table-cell 属性，但当然它在 ie 中不起作用。

有没有人找到任何解决方法？我一直在寻找，但没有找到任何东西。
条件 CSS、.htc 文件、javascript...任何东西？
我真的很想避免使用浮动和清除来制作所有内容

【问题讨论】：

也许是 CSS pie？ css3pie.com
这是用于布局还是实际的表格数据，只需放入 <table> 和相关元素就可以了吗？
布局，我说的是CSS属性display:table，不是html table
我找到了这个code.google.com/p/ie7-js，它看起来很棒。很多东西都修好了，但我找不到我要找的房产。有人试过这个脚本吗？
好像没有修复：stackoverflow.com/questions/3327046/…

标签： html css layout internet-explorer-6

【解决方案1】：

对不起。没有使 IE6 支持 CSS display:table 的修复程序。在 IE6 中实现这种布局的唯一方法是实际使用 <table> 元素。

第一个问题：你真的需要支持IE6吗？如果您可以简单地放弃对它的支持，您将自己解决一大堆问题，包括这个问题。目前全球 IE6 的使用率低于 3%，在大多数发达国家甚至更低。

如果您仍然需要支持 IE6，那么您最明显的解决方案就是放弃您对语义标记的自豪感，只使用 <table> 标记。

正如@Tom 所述，下一个最佳解决方案是使用display:inline-block; 编写布局。

inline-block 允许您将元素定义为块，但仍将它们保留在文本流中（有点像<img> 标签默认的工作方式）。如果你将它与固定的元素宽度结合起来，并在行周围设置 div，你可以获得类似于表格的效果，尽管可能很难让它随着页面宽度动态扩展。

一个很大的“陷阱”错误是inline-block 仅适用于具有默认样式display:inline 的元素在IE6/7 中。换句话说，它适用于<span>，但不适用于<div>。不是灾难，而是需要注意的事情，特别是因为您特别询问 IE6 支持。除此之外，好消息是您应该能够摆脱使用display:inline-block 而无需任何其他黑客或变通方法。

【讨论】：

不幸的是，我必须支持 ie，而不是我的决定......我个人会毫不犹豫地放弃它......第二件事，我不认为你的统计数据是有效的，几年前是大约 50%...我真的不认为它已经下降这么低...不幸的是仍然有很多人安装了 xp，他们不知道浏览器是什么，并且默认使用 ie6...伤心，但真实
关于你的解决方案，我认为我只坚持浮动，考虑到内联块的限制
@ZolaKt - IE 作为一个整体 仍然在 45% 左右，但 IE6 的使用率正在急剧下降。没有统计网站会真正准确，但为了更好地了解总体趋势，我推荐gs.statcounter.com。他们目前显示 IE6 在全球范围内为 4%，在欧洲为 1.9%，在北美为 2.1%。其他人显示类似的统计数据。但这是任意的；您需要注意您的网站的使用情况。如果您仍然有足够的 IE6 用户值得支持他们，那么您应该这样做。确实，这是一个成本决定：支持 IE6 的成本与您将失去多少用户。
感谢您的统计数据。无论如何，一般 IE6-IE9 都是垃圾，需要破解和修复才能像所有其他人一样工作。所以如果我必须破解才能让它工作，我还不如破解 IE6
@Spudley，喜欢您的评论：“支持 IE6 的成本与您失去的用户数量相比”。这个问题可以/应该适用于很多事情。

【解决方案2】：

IE 不支持 display:table 和 display:table-cell 但 IE7 及以下版本支持 display:inline-block。完成这项工作的常用方法是执行以下操作：

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

请记住，CSS 为您提供了很大的定位能力，并且考虑到您希望布局看起来如何的一些上下文，我也许可以为您提供更好的解决方案。

由于误解，让我澄清一下上面的代码。显示：-moz-inline-stack；为旧版本的 Firefox 声明。缩放：1； IE 有一个名为hasLayout 的属性，这是一种触发它的方法。 *display:inline 被称为 *property hack，用于从所有 非 IE 浏览器

隐藏此行

zoom:1 和 *display:inline 有效地允许块级元素表现得像内联元素（这样内联块将在 IE6+ 中工作）

更多信息请阅读：

【讨论】：

一个很好的一般答案，但具体建议有些过时了。 -moz-inline-stack 不是必需的，除非您需要支持低于 v2 的 Firefox，这意味着您真的不需要它。您也不需要*display:inline;，因为它在IE6 中会覆盖inline-block。 IE6/7 确实支持inline-block（尽管有一些“陷阱”错误）； *display:inline 只需要支持 IE5.5。而zoom:1是针对各种IE问题的常见bugfix，但对inline-block完全没有任何影响，所以我不知道为什么在这里提到它。
注意：默认情况下内联的元素支持内联块。它不适用于 IE6 中的 div 块元素。
@Spudley 如果需要 IE6 支持，那么我疯狂地假设还需要旧版本的 Firefox。
@Spudley "你也不需要 *display:inline; ，因为它在 IE6 中覆盖了 inline-block。"是非常不正确的说法。