IE7和CSS table-cell属性

StackOverflow https://stackoverflow.com/questions/249103

题

所以我喜欢它，当我的应用程序在Firefox中工作得很好，但后来我在IE中打开它... ...不，请再试一次。

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

我最初使用的是 display：block ，但是如果没有 table-cell 属性，Firefox就会让它变得怪异。

如果不在JavaScript中添加黑客来测试IE，我很乐意这样做。有什么建议吗？

感谢。

有帮助吗？

解决方案

解决此问题的好方法 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>

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

其他提示

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

我遇到了同样的问题并使用了

*float: left;

＆QUOT * QUOT;仅表示IE

嗯， IE7没有 display：table（-cell / -row） 所以你必须想出其他的东西或做浏览器定位（我同意，这是糟糕的黑客攻击）。作为一个快速修复（我不知道你想要实现什么，外观方面）你可以尝试 display：inline-block 并查看它的样子。

也许找出一种方法来做 display：block 并解决“Firefox渲染它很奇怪”的问题。代替？你能准确地描述一下奇怪渲染的意思吗？

您永远不需要Javascript来测试IE，请使用条件评论。

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

使用inline-block适用于此类内容。不，IE 6和IE 7在技术上没有显示：inline-block，但您可以使用以下样式复制行为：

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

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

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

我怀疑采用不同的方法可以通过内在的跨浏览器方式解决您的问题。您是否可以打开一个单独的问题来描述您尝试实现的效果，并发布当前在Firefox中使用的HTML和CSS？

用户eyelidless的条件评论的代码示例，亲切地发布

＆quot; [if lt IE 8]＆quot;仅当浏览器的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。使用Table和TD＆amp; amp; IE7看起来是相同的。 TR标签。在某些页面上，IE 8只有20％的时间工作，所以我使用[if lt IE 9]

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

我尝试了一切，我发现的唯一方法就是使用Javascript / Jquery。这是一个干净轻量级的解决方案：点击此处

IE7不支持 display：inline-block; 。一个明显的黑客是 zoom：1; * display：inline; 在你的css之后为显示：table-cell;

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top