Internet Explorer 8 忽略了“显示：表格单元”元素的宽度答案

【问题标题】：internet explorer 8 ignores width for 'display: table-cell' elementInternet Explorer 8 忽略了“显示：表格单元”元素的宽度
【发布时间】：2011-06-04 05:50:26
【问题描述】：

According to quirks mode，internet explorer 8 确实支持显示属性的表格选项，但在这个例子中它表现出非常奇怪的行为
http://jsfiddle.net/e3cUn/3/

在普通浏览器中，内部图像将被缩放以适合 150x150 的框，而不会更改尺寸比（拉伸）。

但在 IE8 中，外框（蓝色）也会拉伸：

1) 你见过这样的事吗？它似乎与text-align:center 相关：删除此属性可以解决问题，但我确实需要将图像居中（至少在非ie 浏览器中）。

2) 如果无法正确修复，如何为 IE 提供特殊的display 值？我在网上看到过一些例子，比如#display: block;，但它们都只能在 IE7 下运行。

edit 我知道 <!--[if IE 8]> 和类似的命令可以放入 html，但我实际上是在寻找一种在 css 文件中执行此操作的方法。像这样的

    display: table-cell;
    #display: block;

第二行不是注释，它会覆盖 ie7 及以下的先前值。（但不是 ie8）

谢谢！

【问题讨论】：

+1，我自己也遇到了同样可怕的错误！
你也可以使用display: block\9;定位IE8。

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

如果 text-align: center 不起作用，您是否可以尝试以下方法（除非您有某些理由需要使用表格布局）。这通常是居中任何块布局元素的首选方法。必要时使用 text-align center 是一种后备，但根据我的经验不太可靠 - 你不能将它用于嵌套 div 等。
```
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
```
如果您需要对 IE 进行自定义覆盖，最简单的方法是使用外部样式表，并在 <head> 部分提供以下内容：
```

```
提供低于普通样式表的样式表，它应该覆盖它。如果是这样，您总是可以在需要覆盖的语句末尾提供!important 标签（尽管除非绝对必要，否则最好避免这样做，因为它会破坏子元素的继承，并且您必须经常记住它）。例如：
```
.root img {
    text-align: left !important;
    ...
}
```

【讨论】：

1) 'display:table-cell' 是我所知道的将图像垂直居中的唯一不错的方法。如果我删除它，水平居中不再是问题。
2) 我知道，我实际上是在寻找一种方法来提供 IE 特定的值 inside css 文件。我不想为 ie 创建单独的样式表（尽管我会，如果这是唯一的选择）。你知道这样的事吗？
1) 我在一个简短的测试中指出，您可以将display: table-cell 用于容器元素和margin: auto 技巧用于img 元素。因此，您可能会从 .root 元素中删除 text-align: center 并直接设置 img 的样式。 2) 我见过的唯一可靠的内部 IE CSS hack（尽管我不喜欢它）是使用 *，我相信在 IE8 中仍然有效。我也没有观察到您在 IE7 中报告的拉伸，这很奇怪，因为 IE8 是错误的。
1）它似乎没有用，直到我删除了display: table-cell（我尝试了 jsfiddle 示例）2）谢谢，我会试试的。至于ie7，行为完全不同也就不足为奇了：它应该忽略display: table-cell。

【解决方案2】：

如果display:table-cell 元素的父容器具有display:table 属性（和table-layout:fixed）似乎会有所帮助，请参阅this example 和this related question。

【讨论】：

table-layout:fixed 似乎为我解决了这个问题。谢谢。

【解决方案3】：

使用width而不是max-width，因为在ie8中，表格的实际宽度将被采用。检查这个Fiddle。

重新排列 CSS：

.root img {
    width: 130px;
    max-height: 130px;   
}

更新

CSS：

.root span {
    width:130px;
    overflow:hidden;
    display:inline-block;
}
.root img {
    max-width: 130px;
    max-height: 130px;
}

HTML：

<div class="root">
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png  /></span>
</div>

【讨论】：

这是一个中途的解决方案，但是当图像高度大于其宽度时，它不会保持图像的纵横比，对吧？
好的，我已经更新了 jsfiddle.net/e3cUn/61 ，但是您需要在图像之外使用 span。请检查上面的答案是否已更新
很好的解决方案，+1。由于我已经将 CSS 定位到 IE 7 和 IE 6，因此我决定更改我的代码以将相同的 CSS 定位到 IE 8，这为我解决了问题。否则，我肯定会去的。

【解决方案4】：

添加赏金后，我最终通过将我的 CSS 定位到 IE8 来解决这个问题。我已经在使用 Paul Irish's technique of adding classes to the <html> element 使用条件 cmets：

<!--[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]-->

所以我所要做的就是为 IE 8 及更低版本添加一个额外的 CSS 规则：

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

加上techniques for vertically centring images，这给了我一个很好的跨浏览器解决方案。

【讨论】：

带有条件样式的好技巧！就像所有令人惊奇的事情一样，回顾起来似乎很简单。

【解决方案5】：

你有 doctype 标签吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

我曾经在IE遇到过同样的问题，解决了这个问题。

祝你好运

【讨论】：

我把'strict'改成'transitional'，还是一样。嗯，谢谢你的尝试！