IE display: table-cell child ignores height: 100%
Unfortunately, the effect of percentage values for height
on display: table-row
and display: table-cell
elements is undefined according to the spec:
CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.
So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).
To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.
height:100% inside table-cell not working on Firefox and IE
For height:100%
to work, all parent containers must be height:100%
. If you notice, your .table-cell
styles do not have height:100%
.
Adding this style fixes the issue in Firefox:
.table-cell {
display:table-cell;
vertical-align: middle;
width:100%;
height:100%;
}
As an alternative, adding the image to your HTML rather than as a CSS background-image
might also work.
body, html { margin:0; padding:0; height:100%;}.table { display:table; width:100%; height:100%;}.table-cell { display:table-cell; vertical-align: middle; width:100%;}.content { height: 100%; display: block; overflow: hidden; position: relative; background-size:cover;}
.content img { width:100%; height:100%;}
<div class="table"> <div class="table-cell"> <div class="content"> <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/> </div> </div></div>
Only Firefox ignoring 100% height with display: table-cell
Take all the height declarations off: an item set to display: table-cell
as a child of some element set to display: table
should always be 100% height of its parent.
You also have display: block
and display: table-cell
on the same element. Even though the display: table-cell
will take precedence (because it's last), you should try and keep your code clean.
The code below works in Firefox for me:
HTML:
<div>
<a href="#">test</a>
</div>
CSS:
div { display: table; height: 100px; border: 4px solid #000; width: 300px;}
a { display: table-cell; border: 4px solid #0f0; vertical-align: middle; text-align: center; }
Demo on JS Fiddle.
Related Topics
Why Doesn't This A:Visited CSS Style Work
Is Background-Position-X (Background-Position-Y) a Standard W3C CSS Property
Css: Hover One Element, Effect For Multiple Elements
How to Animate Handwriting Text on the Web Page Using Svg
Top Nav Bar Blocking Top Content of the Page
How to Have Css3 Animation to Loop Forever
Gwt Theme Style Overrides My CSS Style
iOS 7 iPad Safari Landscape Innerheight/Outerheight Layout Issue
What Bug Does Zoom:1; Fix in CSS
How to Add a Box-Shadow on One Side of an Element
Css Text-Decoration Property Cannot Be Overridden by Child Element
Css3 Animation Not Working in Safari
Repeat Table Headers in Print Mode
How to Delay a :Hover Effect in Css
Difference Between Background and Background-Color
Set Flexbox Children to Have Different Heights to Use Up Available Space