internet explorer 8 ignores width for 'display: table-cell' element_问答_开发者

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).

internet explorer 8 ignores width for 'display: table-cell' element

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

internet explorer 8 ignores width for 'display: table-cell' element

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.

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>

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.

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:
```

```
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;
    ...
}
```

do you have a doctype tag?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

I had a same problem once with IE, that solved the problem.

Good luck

internet explorer 8 ignores width for 'display: table-cell' element

精彩评论

关注公众号

热门标签

图文推荐

internet explorer 8 ignores width for 'display: table-cell' element

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：