MVC 4 ActionLink does not scroll properly in table header in scrollable div in Internet Explorer

Question

I have a view with a div that essentially looks like this

<div style="width:100%;height:295px;overflow:auto;margin:0 auto">
    <table>
        <thead>
            <tr>
                <th>A normal column</th>
                <th>@Html.ActionLink("An action link", "Details", new { id = ViewBag.SiteId }, null)</th>
                <th>Another normal column</th>
            </tr>
        </thead>
        <tbody>
        @{
            for (var i = 0; i < Model.Count; ++i)
            {
                    <tr>
                        <td>@Html.DisplayFor(modelItem => Model[i].Edit)</td>
                        <td>@Html.DisplayFor(modelItem => Model[i].EditCategory)</td>
                        <td>@Html.DisplayFor(modelItem => Model[i].EditSeverity)</td>
                    </tr>
            }
        }
        </tbody>
    </table>
</div>

There are enough rows in the Model that the table will be taller than the div, thus giving the div a scrollbar. However, when I use that scrollbar, the text of the ActionLink does not scroll! Instead in stays in the same place, thereby overlapping the data in the rows below it, until a mouse over it or another link, at which point it jumps back up to where it should be and displays there, even if that would place it above the div. This is only happening for me in Internet Explorer ( I only have IE 7 installed so I don't know how it works in other flavors). The ActionLink will scroll properly in Chrome and Firefox.

Is there anything I can do to get this to function properly in IE as well?

Answer 1

Try applying position:relative to the div as per these answers:
IE7 CSS Scrolling Div Bug
ie7 - relatively positioned div does not scroll in its container