html – Internet Explorer 8忽略’display：table-cell’元素的

发布时间：2020-12-14 21:38:36 所属栏目：资源来源：网络整理

导读：According to quirks mode，互联网浏览器8支持显示属性的表选项，但在这个例子中，它显示非常奇怪的行为 http://jsfiddle.net/e3cUn/3/ 在正常浏览器中，内部图像将被缩放以适应150×150盒而不改变尺寸比(拉伸)。但在IE8中，外箱(蓝色)也将伸展：你有没有

According to quirks mode，互联网浏览器8支持显示属性的表选项，但在这个例子中，它显示非常奇怪的行为
http://jsfiddle.net/e3cUn/3/

在正常浏览器中，内部图像将被缩放以适应150×150盒而不改变尺寸比(拉伸)。

但在IE8中，外箱(蓝色)也将伸展：

你有没有看到过这样的东西？它似乎与text-align有关：center：删除此属性可解决问题，但我确实需要将图像中心(至少在非ie浏览器中)。

2)如果这不能正确修复，我该如何为IE提供特殊的显示值？我已经在网络上看到了几个例子，比如#display：block;但是它们都只适用于IE7。

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

display: table-cell;
    #display: block;

第二行不是一个注释，它会覆盖ie7及以下的以前的值。 (但不是ie8)

谢谢！

解决方法

添加赏金后，我最终通过将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，这给了我很好的跨浏览器解决方案。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!