IE7和CSS表格单元格属性

所以当我的应用程序在Firefox中运行良好时，我非常喜欢它，但我在IE中打开它，然后。。。不，请再试一次

我遇到的问题是，我正在使用JavaScript将CSS显示属性设置为

none

或

table cell

我最初使用的是

display:block

，但是Firefox在没有

表单元格

属性的情况下表现得很奇怪

我希望这样做，而不必在JavaScript中添加黑客来测试IE。有什么建议吗

谢谢。

好吧，所以你得想点别的办法，或者做浏览器定位（我同意，这是个糟糕的黑客行为）。作为一个快速解决方案（我不知道您试图实现什么，外观方面），您可以尝试

display:inline block

并查看它的外观

---

也许可以想出一种方法来执行

显示：阻塞
并解决“Firefox呈现怪异”的问题？你能准确地描述一下这种奇怪的呈现是什么意思吗？
你永远不需要Javascript来测试IE，使用它

你可能会看到在IE中处理类似表格的显示的解决方案。
我已经使用CSS十多年了，我从来没有机会使用display:table cell，我唯一使用条件注释的时候就是对IE6隐藏高级效果

我怀疑另一种方法会以一种本质上跨浏览器的方式解决您的问题。您能否打开一个单独的问题来描述您试图实现的效果，并发布当前在Firefox中工作的HTML和CSS？
解决此设置的一个好方法是将
显示
值设置为
'
：



空值会使样式恢复为其默认值。此解决方案适用于所有主要浏览器。
我也遇到了同样的问题，并使用了

*float: left; 

“*”表示仅IE
我使用jQuery解决了这个问题：

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

$（文档）.ready（函数（）{
如果（$.browser.msie&&$.browser.version==7）
{
$（“.tablecell”）.wrap（“”）；
$（“.tablerow”）.wrap（“”）；
$（“.table”）.wrapInner（“”）；
}
});

上述脚本假定您有使用以下样式的div：

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>


.table{display:table；}
.tablerow{显示：表行；}
.tablecell{display:表格单元格；}
使用内联块很适合这种类型的东西。不，IE 6和IE 7技术上没有display:inline块，但您可以使用以下样式复制该行为：

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

关键是“缩放：1”切换元素上的“hasLayout”属性，该属性更改浏览器渲染块级元素的方式。内联块的唯一问题是你不能有小于4px的边距。
一个代码示例，用于用户发布的条件注释

“[if lt IE 8]”仅当浏览器的IE低于IE8时才起作用，因为IE8做得很好。通过条件注释，IE7可以很好地水平排列div。。。
HTML:

IE8和IE9和FireFox一样使用CSS。使用表和TD&TR标签，IE7现在看起来是一样的。在某些页面上，IE 8只工作了20%的时间，所以我使用了[if lt IE 9]

这也有助于消除IE7无法处理的垂直对齐问题。
我尝试了所有方法，唯一的方法是使用Javascript/Jquery跨浏览器。这是一个干净的轻量级解决方案：
IE7不支持
显示：内联块任意一个。一个明显的缺陷是
zoom:1*显示：内联在css之后，用于
显示：表格单元格
在Firefox中将其设置为block时，它会将表格单元格彼此重叠而不是并排呈现。我会重写整个过程，改为使用div，但我对此很懒散，所以我只编写了sh**ty hack代码。如果你在做某些块级元素，你可以将它们设置为float“float:left”，这样在Firefox中它们就可以并排堆叠，而不是成行。或者“display:inline block”可能在这里起作用，但在IE7中，它只能用于通常是内联的元素，比如a或em。IE7不支持
display:inline block。一个明显的缺陷是
zoom:1*显示：内联
准确地说，
*
（星号）hack用于IE 7及以下版本。虽然*是一个很好的技巧，但float不会为您提供均匀分布的元素，这正是您希望在表中显示的元素。有趣的是，您使用firefox hack，然后查找IE hack.）在chrome中，您可以将其设置为
initial
：）CSS3中添加了
initial
关键字，根据规范，它的行为与上述内容完全相同。我喜欢这种黑客行为：）@andy magoon，现在jQuery不推荐使用这种没有.browser属性的解决方案了吗？或者仅仅创建我们自己的浏览器检测代码是唯一的解决方案？@raphie创建一个单独的.js并使用条件注释=/@RaphaelDDL谢谢你的建议，是的，我必须创建自己的浏览器检测代码，至少可以检测基本类型的系统，如iOS、Android或Windows，以及一些主要的浏览器，如Gecko/Mozilla、webkit、，safari和ie。我还必须将整个过程包装到IE7中，以获得表+100非常好的答案。比我遇到的任何其他解决方案都有效！
div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div> 

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }