无法点击 IE7 元素答案

【问题标题】：IE7 element can't be clicked无法点击 IE7 元素
【发布时间】：2011-03-07 08:57:55
【问题描述】：

我已将缺陷缩小到此示例，其中数字“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”模拟计时器。

【问题讨论】：

你定义sortTable()了吗？
我用了tyydot的例子来证明javascript与问题无关。

标签： html css dom internet-explorer-7

【解决方案1】：

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

如果这不是一个选项，我还发现将 *display: inline 添加到 div 可以解决此问题。

display 之前的星号是一个 CSS hack，仅将规则应用于 IE7 及以下版本。它不是一个很棒的使用方法，因为它不是有效的 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）

【讨论】：

但它已被inline 修复（出于某种奇怪的原因..）？
@thirtydot: 在 DIV 上，我使用 ABSOLUTE（加上 TOP: 和 BOTTOM:) 来获取页面大小减去页眉和页脚。 RELATIVE 有同样的问题。在表上，我使用 relative 来允许移动某些包含元素的位置。
@thirtydot 我快疯了，您与 *display hack 的链接对我有用，但现在我无法在本地测试夹具上复制它。我还在看。
@shannon：把你用的测试用例贴出来，我看看。
@thirtydot：我的测试用例中的问题是 DIV 上的绝对与相对问题。 inline 修复了相对情况，但不是绝对情况。这里疯狂的糟糕，我仍然不明白根本原因。我的实际应用程序有大约 200 个 CSS 声明，坦率地说，我不确定这个特定的 IE7 不可点击元素是什么时候出现的。如果您有兴趣，我很乐意在我们的公共测试站点上与您分享测试凭据。

【解决方案2】：

尝试使用括号

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

【讨论】：