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

后端未结

关注

 5  2221

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

相关标签:

5条回答

花落未央

2020-12-03 08:21

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

野性不改

2020-12-03 08:24

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>

0 讨论(0)

离开以前

2020-12-03 08:36
1. 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;
}
```
2. 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;
    ...
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
甜味超标

2020-12-03 08:41
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:
```




 <html class=""> 
```
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 讨论(0)
发布评论:

提交评论
- 加载中...
栀梦

2020-12-03 08:44
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
0 讨论(0)
发布评论:

提交评论
- 加载中...