IE7 和 CSS 表格单元格属性

Posted 2023-03-06

【中文标题】IE7 和 CSS 表格单元格属性

【英文标题】：IE7 and the CSS table-cell property

【发布时间】：2010-09-19 22:20:33

【问题描述】：

所以我很喜欢我的应用程序在 Firefox 中运行良好，但随后我在 IE 中打开它并...不，请再试一次。

我遇到的问题是我使用 javascript 将 CSS 显示属性设置为 none 或 table-cell。

我最初使用的是display: block，但没有table-cell 属性，Firefox 让它变得很奇怪。

我很乐意这样做，而无需在 JavaScript 中添加 hack 来测试 IE。有什么建议吗？

谢谢。

【问题讨论】：

有趣的是，你用一个 hack 的 firefox 然后寻找一个 IE hack..;)

【参考方案1】：

IE7 也不支持display:inline-block;。一个明显的 hack 是 zoom: 1; *display: inline; 在你的 display:table-cell; 的 css 之后

【参考方案2】：

我尝试了所有方法，发现所有跨浏览器的唯一方法是使用 Javascript/Jquery。这是一个干净的轻量级解决方案：click here

【参考方案3】：

用户无眼睑的条件cmets的代码示例，请发布

"[if lt IE 8]" 仅在浏览器的 IE 低于 IE8 时才有效，因为 IE8 是正确的。使用条件 cmets IE7 可以很好地水平排列 DIV... html：

 <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> 

我的 CSS

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

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

这也有助于解决 IE7 无法处理的垂直对齐问题。

【参考方案4】：

使用 inline-block 非常适合这种类型的东西。不，IE 6 和 IE 7 在技术上没有 display: inline-block，但您可以使用以下样式复制该行为：

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

关键是“缩放：1”切换元素上的“hasLayout”属性，这会改变浏览器呈现块级元素的方式。内联块的唯一问题是您的边距不能小于 4px。

【讨论】：

+100 非常好的答案。比我遇到的任何其他解决方案都好用！

【参考方案5】：

将display 值设置为'' 解决此问题的好方法：

<script type="text/javascript">
<!--
function toggle( elemntId ) 
    if (document.getElementById( elemntId ).style.display != 'none') 
        document.getElementById( elemntId ).style.display = 'none';
     else 
        document.getElementById( elemntId ).style.display = '';
    
    return true;

//-->
</script>

空值会导致样式恢复为默认值。此解决方案适用于所有主流浏览器。

【讨论】：

在 chrome 中可以设置为initial。 :)

initial 关键字被添加到 CSS3 中，根据规范，其行为与上述完全相同。

我喜欢这些技巧 :)

【参考方案6】：

我已经使用 jQuery 解决了这个问题：

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

上面的脚本假设你有使用如下样式的 div：

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

【讨论】：

@andy magoon，有没有这样的解决方案没有 .browser 属性，现在jQuery已弃用？或者只是创建我们自己的浏览器检测代码是唯一的解决方案？

@raphie 制作一个单独的 .js 并使用条件 cmets =/

@RaphaelDDL 感谢您的建议，是的，我必须创建自己的浏览器检测代码，至少可以检测 ios、android 或 Windows 等基本类型的系统，以及 Gecko/Mozilla 等一些主要浏览器， webkit、safari 和 ie。

我还必须将整个内容包装到 中才能让 IE7 呈现表格

【参考方案7】：

我有同样的问题并使用过

*float: left; 

“*”表示仅限 IE

【讨论】：

准确地说，*（星号）破解地址为 IE 7 及以下版本。

* 是一个不错的技巧，但 float 不会为您提供均匀间隔的元素，而这正是您在表格中想要的。

【参考方案8】：

我已经使用 CSS 十多年了，但我从来没有使用过 display:table-cell 的机会，而且我使用条件 cmets 的唯一一次是在 IE6 中隐藏高级效果。

我怀疑另一种方法会以本质上跨浏览器的方式解决您的问题。您能否打开一个单独的问题来描述您尝试实现的效果，并发布当前在 Firefox 中运行的 HTML 和 CSS？

【参考方案9】：

您永远不需要 Javascript 来测试 IE，使用 conditional comments。

您可以查看these guys 提出的用于在 IE 中处理类似表格的显示的解决方案。

【参考方案10】：

好吧，IE7 does not have display: table(-cell/-row) 所以你必须想出别的办法或做浏览器定位（我同意，这是不好的 hack）。作为一个快速修复（我不知道你想要实现什么，外观方面）你可以试试display: inline-block 看看它是什么样子的。

也许想办法做display: block 并解决“Firefox 渲染它很奇怪”的问题？你能准确描述一下奇怪的渲染是什么意思吗？

【讨论】：

当您在 Firefox 中将其设置为阻止时，它会将表格单元格呈现在彼此之上，而不是并排。我会重写整个事情以使用 DIV，但我对此很懒惰，所以我只写了 sh**ty hack 代码。

如果你正在做某种块级元素，你可以将它们设置为浮动“float:left”，这样在 Firefox 中它们将彼此相邻而不是成行堆叠。或者 "display: inline-block" 可能在这里工作，但在 IE7 中它只能用于通常是内联的元素，如 a 或 em。

IE7 不支持 display:inline-block;。一个明显的 hack 是 zoom: 1; *显示：内联；