IE7 和 CSS table-cell 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/249103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE7 and the CSS table-cell property
提问by Ryan Smith
So I just love it when my application is working great in Firefox, but then I open it in IE and... Nope, please try again.
所以当我的应用程序在 Firefox 中运行良好时，我只是喜欢它，但后来我在 IE 中打开它，然后......不，请再试一次。
The issue I'm having is that I'm setting a CSS display property to either noneor table-cellwith JavaScript.
我遇到的问题是我将 CSS 显示属性设置为JavaScriptnone或table-cellJavaScript。
I was initially using display: block, but Firefox was rendering it weird without the table-cellproperty.
我最初使用的是display: block，但是 Firefox 在没有该table-cell属性的情况下使它变得很奇怪。
I would love to do this without adding a hack in the JavaScript to test for IE. Any suggestions?
我很想这样做，而无需在 JavaScript 中添加 hack 来测试 IE。有什么建议？
Thanks.
谢谢。
采纳答案by Jacco
A good way of solving this setting the displayvalue to '':
解决此问题的一个好方法是将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>
The empty value causes the style to revert back to it's default value. This solution works across all major browsers.
空值会导致样式恢复为其默认值。此解决方案适用于所有主要浏览器。
回答by andy magoon
I've solved this using jQuery:
我已经使用 jQuery 解决了这个问题：
$(document).ready(function(){
if ($.browser.msie && $.browser.version == 7)
{
$(".tablecell").wrap("<td />");
$(".tablerow").wrap("<tr />");
$(".table").wrapInner("<table />");
}
});
the above script assumes you have divs using style such as:
上面的脚本假设您有使用样式的 div，例如：
<style>
.table { display: table; }
.tablerow { display: table-row; }
.tablecell { display: table-cell; }
</style>
回答by Jonathan Hendler
I had the same issue and used
我有同样的问题并使用
*float: left;
"*" indicates IE only
"*" 仅表示 IE
回答by joelhardi
Well, IE7 does not have display: table(-cell/-row)so you will have to figure something else out or do browser targeting (which I agree, is bad hack). As a quick fix (I don't know what you're trying to achieve, appearance-wise) you could try display: inline-blockand see what it looks like.
好吧，IE7 没有，display: table(-cell/-row)所以你必须想办法解决其他问题或进行浏览器定位（我同意，这是一个糟糕的黑客攻击）。作为一个快速解决方案（我不知道你想要实现什么，外观方面）你可以尝试display: inline-block看看它是什么样子。
Maybe figure out a way to do display: blockand solve the problem of "Firefox rendering it weird" instead? Can you describe what you mean by the weird rendering exactly?
也许想出一种方法来display: block解决“Firefox 渲染奇怪”的问题？你能准确描述一下奇怪的渲染是什么意思吗？
回答by eyelidlessness
You never need Javascript to test for IE, use conditional comments.
你永远不需要 Javascript 来测试 IE，使用条件注释。
You might look at the solution these guyscame up with for handling table-like display in IE.
您可能会查看这些人提出的用于在 IE 中处理类似表格的显示的解决方案。
回答by risingfish
Using inline-block works well for this type of stuff. No, IE 6 and IE 7 technically do not have display: inline-block, but you can replicate the behavior with the following styles:
使用 inline-block 非常适合这种类型的东西。不，IE 6 和 IE 7 在技术上没有 display: inline-block，但您可以使用以下样式复制行为：
div.show-ib {
display: inline-block;
*zoom: 1;
*display: inline;
}
The key to this is 'zoom: 1' toggles the 'hasLayout' property on the element which changes the way the browser renders a block level element. The only gotcha with inline block is you cannot have a margin of less than 4px.
关键是“缩放：1”切换元素上的“hasLayout”属性，这会改变浏览器呈现块级元素的方式。内联块的唯一问题是您的边距不能小于 4px。
回答by Herb Caudill
I've been using CSS for over a decade and I've never had occasion to use display:table-cell, and the only times I ever use conditional comments are to hide advanced effects from IE6.
我已经使用 CSS 十多年了，我从来没有机会使用 display:table-cell，而且我使用条件注释的唯一一次是隐藏 IE6 的高级效果。
I suspect that a different approach would solve your problem in an intrinsically cross-browser way. Can you open a separate question that describes the effect you're trying to achieve, and post the HTML and CSS that's currently working in Firefox?
我怀疑不同的方法会以本质上跨浏览器的方式解决您的问题。您能否打开一个单独的问题来描述您尝试实现的效果，并发布当前在 Firefox 中使用的 HTML 和 CSS？
回答by stack collision with heap
A code example fot the conditional comments that user eyelidlessness, kindly posted
用户无眼的条件评论的代码示例，好心张贴
"[if lt IE 8]" only works if the browser is IE lower than IE8 because IE8 does it right. With the conditional comments IE7 arranges the DIVs nicely horizontally... HTML:
"[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>
My CSS
我的 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 and 9 Work with the CSS as does FireFox. IE7 looks now the same using the Table and TD & TR tags. On some pages IE 8 worked only 20% of the time, so I used [if lt IE 9 ]
IE 8 和 9 像 FireFox 一样使用 CSS。IE7 现在使用 Table 和 TD & TR 标签看起来是一样的。在某些页面上，IE 8 仅在 20% 的时间内工作，所以我使用了 [if lt IE 9 ]
This also helps smoothing out vertical-align issues that IE7 can't handle.
这也有助于解决 IE7 无法处理的垂直对齐问题。
回答by Mike6679
I tried everything and the only way I found that was all cross browser was to use Javascript / Jquery. This is a clean lightweight solution: click here
我尝试了所有方法，我发现所有跨浏览器的唯一方法是使用 Javascript / Jquery。这是一个干净的轻量级解决方案： 单击此处
回答by Phill Healey
IE7 doesn't support display:inline-block;either. An apparent hack is zoom: 1; *display: inline;after your css for display:table-cell;
IE7 也不支持display:inline-block;。一个明显的黑客是zoom: 1; *display: inline;在你的 css 之后display:table-cell;
