Html Internet Explorer 8 忽略“显示：表格单元格”元素的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4608278/
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
internet explorer 8 ignores width for 'display: table-cell' element
提问by Nikita Rybak
According to quirks mode, internet explorer 8 does support table options for display property, but in this example it exhibits very strange behaviour
http://jsfiddle.net/e3cUn/3/
根据怪癖模式，Internet Explorer 8 确实支持显示属性的表选项，但在这个例子中它表现出非常奇怪的行为
http://jsfiddle.net/e3cUn/3/
In a normal browser, inner image will be scaled to fit 150x150 box without changing dimension ratio (stretching).
在普通浏览器中，内部图像将被缩放以适合 150x150 框而不改变尺寸比（拉伸）。
But in IE8, outside box (blue one) will also stretch:
但是在IE8中，外框（蓝色的）也会拉伸：
1) Have you seen anything like that? It seems to be related to text-align:center: removing this property fixes the problem, but I do need to center image (in non-ie browsers, at least).
1）你见过这样的东西吗？这似乎与text-align:center：删除此属性可解决问题有关，但我确实需要将图像居中（至少在非 ie 浏览器中）。
2) If this can't be fixed properly, how can I provide a special displayvalue for IE? I've seen a few examples on the web, like #display: block;, but all of them work up to IE7 only.
2) 如果不能正确修复，如何display为 IE提供特殊值？我在网上看到了一些例子，比如#display: block;，但它们都只适用于 IE7。
editI know about <!--[if IE 8]>and similar commands to put in html, but I was actually looking for a way to do that in css file. Something like this
编辑我知道<!--[if IE 8]>要放入 html 的类似命令，但实际上我正在寻找一种在 css 文件中执行此操作的方法。像这样的东西
display: table-cell;
#display: block;
Second line isn't a comment, it overrides previous value for ie7 and below. (but not ie8)
第二行不是注释，它会覆盖 ie7 及以下的先前值。（但不是 ie8）
Thanks!
谢谢！
回答by Andy E
After adding the bounty, I ended up working around this problem by targeting my CSS to IE8. I was already using Paul Irish's technique of adding classes to the <html>elementusing conditional comments:
添加赏金后，我最终通过将我的 CSS 定位到 IE8 来解决这个问题。我已经在使用Paul Irish 的<html>使用条件注释向元素添加类的技术：
<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
So all I had to do is add an extra CSS rule for IE 8 and lower:
所以我所要做的就是为 IE 8 及更低版本添加一个额外的 CSS 规则：
.img-container { display: table-cell; } /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */
Coupled with the techniques for vertically centring images, this gives me a nice cross-browser solution.
回答by Sanooj
Use widthinstead of max-widthbecause in ie8 the actual width of the image will be taken for the table. Check this Fiddle.
使用width而不是max-width因为在 ie8 中将采用图像的实际宽度作为表格。检查这个Fiddle。
Rearrange CSS :
重新排列 CSS ：
.root img {
width: 130px;
max-height: 130px;
}
Updated
更新
CSS :
CSS :
.root span {
width:130px;
overflow:hidden;
display:inline-block;
}
.root img {
max-width: 130px;
max-height: 130px;
}
HTML :
HTML :
<div class="root">
<span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span>
</div>
回答by 0x4a6f4672
It seems to help if the parent container of a display:table-cellelement has a display:tableattribute (and a table-layout:fixed), see this exampleand this related question.
如果display:table-cell元素的父容器具有display:table属性（和 a table-layout:fixed）似乎有帮助，请参阅此示例和此相关问题。
回答by Chris Krycho
If text-align: center isn't working, can you try the following, instead (unless you have some reason that using the table layout is necessary). This is generally the preferred method of centering any block layout element. Using text-align center is a fallback when necessary, but less reliable in my experience - you can't use it for nested divs, etc.
img { display: block; margin-left: auto; margin-right: auto; }If you need to do a custom override for IE, the easiest way is to use an external stylesheet, and supply the following in your
<head>section:<!--[if lte IE 8]> <link type='text/css' rel='stylesheet' src='link-to-your-source'/> <[endif]-->Supply that stylesheet below the ordinary one, and it should override it. If it does, you can always resort to supplying
!importanttags at the end of statements you need to override (though it's always preferable to avoid that unless absolutely necessary, as it messes up the inheritance for child elements, and you constantly have to remember it). For example:.root img { text-align: left !important; ... }
如果 text-align: center 不起作用，您可以尝试以下操作吗（除非您有某种原因需要使用表格布局）。这通常是将任何块布局元素居中的首选方法。必要时使用 text-align center 是一种后备，但根据我的经验不太可靠 - 您不能将它用于嵌套的 div 等。
img { display: block; margin-left: auto; margin-right: auto; }如果您需要为 IE 执行自定义覆盖，最简单的方法是使用外部样式表，并在您的
<head>部分中提供以下内容：<!--[if lte IE 8]> <link type='text/css' rel='stylesheet' src='link-to-your-source'/> <[endif]-->在普通样式表下方提供该样式表，它应该覆盖它。如果是这样，您总是可以
!important在需要覆盖的语句的末尾提供标签（尽管除非绝对必要，否则总是最好避免这种情况，因为它会破坏子元素的继承，并且您必须经常记住它） . 例如：.root img { text-align: left !important; ... }
回答by Sebastjan
do you have a doctype tag?
你有文档类型标签吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
I had a same problem once with IE, that solved the problem.
我曾经在 IE 上遇到过同样的问题，解决了这个问题。
Good luck
祝你好运
