这不是我第一次遇到 IE8 的 css 问题。 我有一个可以正常工作的可排序表。 它有一个方向图标,显示为排序标题列的背景,并根据该列是升序还是降序而变化。 问题是,仅在 IE 中,图标不会更新,直到鼠标光标离开标题。
因此,当指针悬停在列标题上时,它保持为原始图标,然后当它移开时,将显示正确的图标。
没有与标题关联的“悬停”事件,但有它的 css。
CSS 看起来像这样:
.costtable th {
cursor: pointer;
}
th[order='ascending'] {
background-image: url(../images/down.png);
background-position: right;
background-repeat: no-repeat;
}
th[order='descending'] {
background-image: url(../images/up.png);
background-position: right;
background-repeat: no-repeat;
}
设置图标的脚本部分如下所示:
$table.find('thead th').removeAttr('order');
$table.find('thead th:nth-child(' + columnNumber + ')').attr('order',ascOrDesc);
在有人指出之前,我知道 IE8 中不支持 nth-child
css,但它在 jQuery 中有效。
最佳答案
通过使用类而不是自定义属性修复了它!
虽然它在其他浏览器中工作正常,但看起来很奇怪。
关于jquery - 浏览器特定的表列排序图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16318326/