的Internet Explorer 8忽略宽度为“显示：表小区”元素

According to quirks mode，Internet Explorer 8中确实为显示属性的支持表的选择，但在本实施例中它显示出非常奇怪的行为
http://jsfiddle.net/e3cUn/3/的Internet Explorer 8忽略宽度为“显示：表小区”元素

在正常浏览器，内部图像将被缩放以适应150x150的盒子，而不会改变尺寸比例（拉伸）。

alt text

但在IE8，外箱（蓝色）也将延伸：
alt text

1）你见过这样的事情？它似乎与text-align:center有关：删除此属性可修复此问题，但我确实需要居中映像（至少在非ie浏览器中）。

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

编辑我知道<!--[if IE 8]>和类似的命令放在HTML中，但我实际上正在寻找一种方法来做到这一点在CSS文件。像这样的东西

display: table-cell; 
    #display: block;

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

谢谢！

来源

2011-01-05 Nikita Rybak

+1，只是自己碰到同样的可怕的错误！ – 2011-10-11 17:09:00

你也可以用'display：block \ 9;'来定位IE8。 – Tower 2012-01-01 00:46:56

加入后赏金，我最终通过将我的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]-->

所以我不得不做的就是添加一个额外的CSS规则IE 8，下：

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

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

来源

2011-10-12 08:52:30

有条件的风格的好方法！像所有惊人的事情一样，在回顾中似乎很简单。 – 2011-10-12 10:51:24

你有doctype标签吗？

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

我有一个与IE相同的问题，解决了这个问题。

好运

来源

2011-01-05 19:22:45 Sebastjan

我把'严格'改为'过渡'，依然如此。好吧，谢谢你的努力！ – 2011-01-05 19:26:46

如果文本对齐：中心不能正常工作，你可以尝试以下方法，而不是（除非你有一些原因，使用表格的布局是必要的）。这通常是居中任何块布局元素的首选方法。使用文本对齐中心后备必要的时候，但我的经验不可靠的 - 你不能使用嵌套的div等
```
img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
```
如果需要对IE做一个自定义替代的最简单的方法是使用一个外部的样式表，并在<head>部分提供以下：
```
 
```
供应，下面的普通一个样式表，它应该覆盖它。如果是这样，您可以随时在需要覆盖的语句末尾提供!important标签（尽管最好避免这种情况，除非绝对必要，因为它会弄乱子元素的继承关系，并且您经常不得不记住它）。例如：
```
.root img { 
    text-align: left !important; 
    ... 
} 
```

来源

2011-01-05 19:29:59

1）'display：table-cell'是我知道垂直居中图像的唯一体面的方式。如果我删除它，水平居中不再是一个问题了。 – 2011-01-05 19:42:01

2）我知道，我实际上正在寻找一种方法来提供特定于IE的值_inside_css文件。我不想为ie创建单独的样式表（虽然我会，如果这是唯一的选择）。你知道吗？ – 2011-01-05 19:43:07

1）我在一个简短的测试中注意到，你可以在容器元素中使用'display：table-cell'，在img元素上使用'margin：auto'技巧。所以你可能会从'.root'元素中删除'text-align：center'，直接改为'img'。 2）我见过的唯一的内部IE CSS破解（尽管我不喜欢它），它使用'* *'，我相信它仍然可以在IE8中运行。我也没有观察到您在IE7中报告的拉伸，这是奇怪的，因为IE8是错误的。 – 2011-01-05 20:54:45

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>

来源

2011-10-12 04:44:19 Sanooj

这是一个中途解决方案，但当图像高度大于其宽度时，不会保持图像的高宽比，对吧？ – 2011-10-12 08:42:30

好吧，我已经更新了http://jsfiddle.net/e3cUn/61/，但您需要使用图像外的跨度。请检查上面的答案更新 – Sanooj 2011-10-12 09:06:18

伟大的解决方案，+1。由于我已经将IE 7和IE 6作为CSS的对象，因此我决定改变我的代码，将相同的CSS定位到IE 8，这为我解决了问题。否则，我肯定会这样做。 – 2011-10-13 12:41:45

这似乎帮助，如果一个display:table-cell元素的父容器具有display:table属性（和table-layout:fixed），见this example和this related question。

来源

2013-03-27 11:52:06 0x4a6f4672

'table-layout：fixed'似乎为我解决了它。谢谢。 – 2013-12-09 15:49:40

的Internet Explorer 8忽略宽度为“显示：表小区”元素

回答

相关问题