Internet Explorer 8忽略“display：table-cell”元素的宽度 [英] internet explorer 8 ignores width for 'display: table-cell' element
问题描述
使用条件注释：
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 +和其他浏览器* /
.ielt9 .img-container {display：block; } / * IE8和低版本* /
与垂直中心图像技术，这给了我一个不错的跨浏览器解决方案。
According to quirks mode, internet explorer 8 does support table options for display property, but in this example it exhibits very strange behaviour
http://jsfiddle.net/e3cUn/3/
In a normal browser, inner image will be scaled to fit 150x150 box without changing dimension ratio (stretching).
But in IE8, outside box (blue one) will also stretch:
1) Have you seen anything like that? It seems to be related to text-align:center: removing this property fixes the problem, but I do need to center image (in non-ie browsers, at least).
2) If this can't be fixed properly, how can I provide a special display value for IE? I've seen a few examples on the web, like #display: block;, but all of them work up to IE7 only.
edit I know about <!--[if IE 8]> and similar commands to put in html, but I was actually looking for a way to do that in css file. Something like this
display: table-cell;
#display: block;
Second line isn't a comment, it overrides previous value for ie7 and below. (but not ie8)
Thanks!
After adding the bounty, I ended up working around this problem by targeting my CSS to IE8. I was already using Paul Irish's technique of adding classes to the <html> element using conditional comments:
<!--[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]-->
So all I had to do is add an extra CSS rule for IE 8 and lower:
.img-container { display: table-cell; } /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */
Coupled with the techniques for vertically centring images, this gives me a nice cross-browser solution.
这篇关于Internet Explorer 8忽略“display：table-cell”元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
