32

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

我遇到的问题是我将 CSS 显示属性设置为JavaScriptnone或table-cellJavaScript。

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

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

谢谢。

4

10 回答 10

48

我已经使用 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>
于 2011-02-10T22:35:19.077 回答
31

解决此设置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>

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

于 2009-03-14T14:14:35.933 回答
9

我有同样的问题并使用

*float: left;

“*”表示仅 IE

于 2009-08-05T21:26:04.257 回答
4

好吧，IE7 没有，display: table(-cell/-row)所以你必须弄清楚其他事情或进行浏览器定位（我同意，这是不好的 hack）。作为一个快速修复（我不知道你想要实现什么，外观方面）你可以尝试display: inline-block看看它是什么样子。

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

于 2008-10-30T02:24:21.110 回答
4

你永远不需要 Javascript 来测试 IE，使用条件注释。

您可能会查看这些人提出的用于在 IE 中处理类似表格的显示的解决方案。

于 2008-10-30T04:00:28.293 回答
4

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

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

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

于 2011-08-08T21:07:12.260 回答
3

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

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

于 2008-10-30T13:49:01.273 回答
1

一个代码示例，用于用户眼睑的条件评论，请发布

“[if lt IE 8]”仅在浏览器的 IE 低于 IE8 时才有效，因为 IE8 是正确的。使用条件注释 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 无法处理的垂直对齐问题。

于 2012-09-07T14:36:36.383 回答
0

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

于 2013-01-23T17:29:58.373 回答
0

IE7也不支持display:inline-block;。一个明显的黑客攻击是zoom: 1; *display: inline;在你的 CSS 之后display:table-cell;

于 2014-05-19T19:29:59.277 回答