Internet Explorer 8 忽略了“显示：表格单元”元素的宽度
Posted
技术标签:
【中文标题】Internet Explorer 8 忽略了“显示：表格单元”元素的宽度【英文标题】：internet explorer 8 ignores width for 'display: table-cell' element 【发布时间】：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。
【参考方案1】：
如果 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;
...
【讨论】：
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'，还是一样。嗯，谢谢你的尝试！以上是关于Internet Explorer 8 忽略了“显示：表格单元”元素的宽度的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer CSS 属性“过滤器”忽略溢出：可见
Internet Explorer 忽略 URL 中的 Hashtag
Internet Explorer 10 忽略 XMLHttpRequest 'xhr.withCredentials = true'
Internet Explorer (IE11) 忽略 CSS break-inside：避免