javascript - IE：令人难以置信的跳跃表标题

免责声明：正如标题中所述，这仅针对Internet Explorer 。这是进行内部开发的一种好处 - 它可以在处理这样的事情时让生活变得更轻松。

免责声明2：我可以在IE7和IE6中重现这一点。我没有尝试过IE8，因为在我们的企业环境中我们无法使用它。

我的目标是创建一个表格，其中内容滚动，同时保持THEAD固定。有很多不同的方法可以实现这一目标;你可以在这篇文章的底部看到我的方法。不幸的是，我没有公开主持这个例子的地方，但你可以在这里复制并粘贴它来测试它： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

因此，如果您向下滚动表格并将鼠标悬停在表格中的第一个单元格上，您将看到我正在谈论的现象：标题行跳起来！

这是它变得有趣的地方。该表由第三方ASP.NET控件呈现。所以我不能改变发出的HTML;只有CSS。使用IE7开发人员的工具栏，我可以看出控件的类正在改变，因为我将鼠标悬停在它上面（正在添加一个新类）。奇怪的是，工具栏不在标题上显示任何onmouseover或onmouseleave事件，只是它调用_events和control，它们都是[Object]。消息来源也没有透露任何有用的信息。

所以我的目标是仅使用CSS来阻止此标题行跳转。这甚至可能吗？如果可能的话，可以在没有CSS表达式的情况下完成（我会拼命避免）吗？

以下是模拟我所看到的示例HTML。

粘贴到此处进行测试：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.ScrollContainer
{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 auto;
    width: 100% !important;
    max-height: 275px;
    border-bottom: solid 1px #009DD9;
}

.ScrollContainer .MasterTable
{
    width: auto !important;
}

.ScrollContainer table
{
    table-layout: fixed;    
}

.ScrollContainer .GridHeader
{
    position:relative;
    top: 0px;
    border-top: solid 1px #009DD9;
    border-right: solid 1px #009DD9;
    border-bottom: solid 1px #009DD9;
    border-left: solid 1px #009DD9;
    background: #cccccc;
}

#Spacer
{
    height: 350px;
}

.GridHeader
{
    height: 30px !important;
}

</style>
</head>
<body>
<div id="Spacer"></div>
<div class="ScrollContainer">
<div class="Dummy">
<div class="Grid">
<table class="MasterTable">
<colgroup>
<col/><col/><col/><col/><col/><col/>
</colgroup>
<thead><tr>
<th class="GridHeader" onMouseEnter="this.className = this.className + ' GridOver';" onMouseLeave="this.className = this.className.replace(' GridOver', '');" ><a href="#" style="GridLink">Column 1</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 2</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 3</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 4</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 5</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 6</a></th></tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

IE：令人难以置信的跳跃表标题

2 个答案: