Question

我已将一个缺陷缩小到此示例，其中数字“1”在IE7中是不可点击的（仅限）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Click 1</title>
    <style type="text/css">     
        div   { position: absolute; overflow: auto; }
        table { position: relative; }
        span  { position: fixed; top: 100px; }
    </style>
</head><body>
    <div>
        <table>
            <tr>
                <span onclick='alert(1)'>1</span>2
            </tr>
        </table>
    </div>
</body></html>

任何人都可以确定根本原因，因此我了解解决方法的选项吗？

我正在使用此处所示的所有CSS来构建可排序的固定头部滚动表。在原始代码中，跨度实际上存在于TH中，通过负边距将标题固定在滚动表上方，同时允许表格渲染器在列宽中考虑标题文本，而不使用表复制或“onResize”模拟计时器。

Answer 1

从position: relative删除div会修复它。

如果这不是一个选项，我还发现添加*display: inline到div修复了它。

display之前的星号是将规则应用于IE7及以下版本的CSS黑客。它不是一个很棒的使用，因为它不是有效的CSS，但它的工作原理并没有问题。

如果这些想法都不适合您，那么查看更完整的测试用例以了解其原因将会很有帮助。

您的原始代码，但使用<span onclick='alert(1)'>以便JavaScript工作：
http://jsbin.com/aretu5 （无法在IE7中点击）

同样，删除了position: relative：
http://jsbin.com/aretu5/2 （适用于IE7）

同样，position: relative仍然存在，*display: inline添加：
http://jsbin.com/aretu5/3 （适用于IE7）

Answer 2

尝试使用括号

<span onclick='sortTable()'>1</span>

IE7元素无法单击

2 个答案: