Question

我一直在尝试开发一种方法，使ASP.NET GridView（或一般表）的行可以点击，同时仍然保持与链接关联的所有常用操作 - 正确的右键单击上下文菜单，中间可点击性以在新标签页等中打开

我的解决方案使用jQuery查找＆lt; a＆gt;每行中的标签并展开＆lt; a＆gt;标记为行的大小，从而使该行看起来是可点击的。这一切在Firefox和Chrome中运行良好，但IE优先考虑表格中的文本而不是＆lt; a＆gt;标记，因此您将获得文本选择器光标，并且当您将鼠标悬停在文本上时无法单击该链接。这个简单的例子说明了我的意思：

<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>

<a href="#" class="link">link here</a>
<div class="content">
    You can't click the link when you hover over this text in IE    
</div>

这可以设计为可访问性，但如果是这种情况，我希望其他浏览器也会效仿。任何人都可以就如何避免这个问题提出任何建议吗？

Answer 1

可能是IE创建新的z-index堆叠上下文的问题之一。要么你有一个没有z-index的已定位父级（已知的IE bug），要么IE也可以为表格单元格做到这一点，因为这会引入一个新的offsetParent。

通常的方法是在每个单元格中放置一个链接（如果它是空的，只包含一个），并使用'display：block'使链接填充单元格的宽度。

Answer 2

您是否尝试过设置a的填充以填充表格行？

棘手的部分是你必须做数学运算才能超过行。如下所示：

$("a").css("padding-top", function() {
         $(this).closest("tr").height - $(this).height;
       });

依此类推，基于a到表格行的位置。

我的想法是，IE可能会看到重叠的元素（如同位于彼此之上）作为一种可能的冲突，从而决定尝试兼顾两者（“好吧，链接很大，但外面的文字它真的不是一个链接，所以让我们把它视为普通文本“）等，但那些纯粹为样式重叠的元素（我认为填充被认为是）不会引起任何警报，因为，嘿，它只是一个视觉事物！

大声思考，让我知道它是否成功。

Answer 3

为什么不直接制作＆lt; a＆gt;显示：阻止并在其中添加其他div？

Answer 4

替代方法：为什么不使整行可以点击，而不是使链接成为行的大小？

$('tr').click(function(){
    $(this).find('a.link').click();
});

您可能希望使用css cursor属性来使该行看起来也是可点击的。

Answer 5

如果元素具有背景颜色或-image设置，则文本不会显示。

尝试...

$（“a”，this）.css（“background-image”，“url（/images/spacer.gif）”）;

<a> is positioned above another element</a>时IE中的文字显示问题

5 个答案: