IE6 CSS显示:表修复?

时间:2011-03-16 15:51:32

标签: html css layout internet-explorer-6


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

我非常喜欢CSS display:tabledisplay:table-cell属性,但当然它在ie中不起作用。

有没有人发现任何修复方法?我一直在寻找,但没有找到任何东西 有条件的CSS,.htc文件,javascript ...什么?
我真的想避免使用浮动和清除所有内容

2 个答案:

答案 0 :(得分:2)

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

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

如果你仍然需要支持IE6,那么你最明显的解决方案就是吞下你的语义标记骄傲,只使用<table>标签。

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

inline-block允许您将元素定义为块,但仍将它们保留在文本流中(有点像<img>标记默认工作的方式)。如果将它与固定元素宽度和wapper divs组合在一起,你可以实现与表类似的东西,尽管可能很难让它随页面宽度动态扩展。

围绕这个问题的一个重大问题是,inline-block仅适用于IE6 / 7中具有默认样式display:inline的元素。换句话说,它适用于<span>但不适用于<div>。不是灾难,而是需要注意的事情,特别是因为你特别询问IE6的支持。除此之外,好消息是你应该能够在没有任何其他黑客或解决方法的情况下使用display:inline-block

答案 1 :(得分:0)

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

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

请记住,CSS为您提供了很多定位能力,并给出了您希望布局看起来如何的背景,我可以为您提供更好的解决方案。

由于误解,让我澄清上面的代码。 显示:-moz-直列堆叠;是为旧版本的Firefox声明的。 缩放:1; IE有一个名为hasLayout的属性,这是一种触发它的方法。 * display:inline被称为*属性hack,用于隐藏所有非IE 浏览器中的这一行

缩放:1和*显示:内联有效地允许块级元素的行为类似于内联元素(以便内联块可以在IE6 +中工作)

欲了解更多信息,请阅读:

  1. http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  2. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/