Question

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

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

alt text

但在IE8中，外框（蓝色）也将拉伸：
alt text

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

2）如果无法正确修复，我如何为IE提供特殊的display值？我在网上看过一些例子，比如#display: block;，但所有这些例子都只适用于IE7。

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

    display: table-cell;
    #display: block;

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

谢谢！

Answer 1

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

<!--[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相结合，这为我提供了一个很好的跨浏览器解决方案。

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 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相同的问题，解决了这个问题。

祝你好运

Internet Explorer 8忽略'display：table-cell'元素的宽度

5 个答案: