Home/ Questions/Q 6687497
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:17:45+00:00

According to quirks mode , internet explorer 8 does support table options for display

  • 0

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 150×150 box without changing dimension ratio (stretching).

alt text

But in IE8, outside box (blue one) will also stretch:
alt text

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0