Absolute Positioning inside a table cell in IE

问题:

I'm having some issues with absolute positioning inside a table cell in Internet Explorer (9 specifically, but I'm sure the issue exists in <9 as well). I'm trying to force a div inside a table cell to take up the whole cell. It was pretty easy in chrome/ff/safari using:

div {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

td {
    position: relative;
}

But for some reason, IE behaves completely differently. I can't get it to give the div a dynamic height based on the table cell at all. Here's an example to show what I'm talking about. It works how I need it to in chrome/ff/safari, but it's broken in IE. Is there any way to get it to work the same way in IE? Thanks!

回答1:

In case someone is still interested in this; a simple solution will fix the issue on IE 10 (my current target).

You need to have a nested div to locate your absolute positioned element:

<td>
    <div>
        <a href="#">FULL HEIGHT</a>
    </div>
</td>

And then add some css, including the lil trick for IE:

td {
    position: relative;
    height: 1px; // IE FIx
}
td > div {
    height: 100%;
}
td > div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // Beauty only
    background-color: orange;
    color: white;
    text-decoration: none;
}

回答2:

I recommend you instead of positioning your element to all directions, use only two of them and instead, use size for your div.

like:

div {
    position: absolute;
    top:0;
    bottom:0;
    width: 100%;
    height: 100%
}

td {
    position: relative;
    width: 400px;
    height: 400px;
}