Menu
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!
634
Use width instead of max-width because in ie8 the actual width of the image will be taken for the table. Check this Fiddle .
Rearrange CSS :
.root img {
width: 130px;
max-height: 130px;
}
Updated
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>
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.
72
It seems to help if the parent container of a display:table-cell element has a display:table attribute (and a table-layout:fixed), see this example and this related question.
4
If text-align: center isn't working, can you try the following, instead (unless you have some reason that using the table layout is necessary). This is generally the preferred method of centering any block layout element. Using text-align center is a fallback when necessary, but less reliable in my experience - you can't use it for nested divs, etc.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
If you need to do a custom override for IE, the easiest way is to use an external stylesheet, and supply the following in your <head> section:
<!--[if lte IE 8]>
<link type='text/css' rel='stylesheet' src='link-to-your-source'/>
<[endif]-->
Supply that stylesheet below the ordinary one, and it should override it. If it does, you can always resort to supplying !important tags at the end of statements you need to override (though it's always preferable to avoid that unless absolutely necessary, as it messes up the inheritance for child elements, and you constantly have to remember it). For example:
.root img {
text-align: left !important;
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
